内容出现在div

我最近尝试了在div与像三角形梯形等内容出现在div

HTML不同的形状以外：

<div class="triangle">HI nice to meet you guys</div>

CSS

.triangle { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid blue; 
}

此前，当div是一个正方形（高度和宽度都是100px）时，内容会正常显示。

当我将div设置为三角形样式时，内容就会出现。

如何使这个比例为了正确显示在div中。

见琴：http://jsfiddle.net/7qbGX/2/

任何建议将是巨大的。

来源

2013-09-25 Vignesh Pichamani

你的div是不可见的，它没有大小，只有边框可见，所以内容溢出。 – adeneo

...并且内容在左边界的末尾正好在预期的位置开始。 – insertusernamehere

感谢您的回复或者是否有方法显示三角形内的内容 –

试试这个：LINK

.triangle{ 
    width: 0px; 
    height: 0px; 
    border-style: inset; 
    border-width: 0 100px 173.2px 100px; 
    border-color: transparent transparent #007bff transparent; 
    float: left; 
    transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
} 

.triangle p { 
    text-align: center; 
    top: 80px; 
    left: -47px; 
    position: relative; 
    width: 93px; 
    height: 93px; 
    margin: 0px; 
}

来源

2013-09-25 11:13:24 Bip

这不会如果p标签的内容更多，则工作。 http://jsfiddle.net/TRuQc/144/ –

修复关闭'p'标签在你的小提琴中，否则看起来不错。固定高度问题可以通过JavaScript/jQuery进行响应。 –

您的高度和宽度为0.您不适合放入任何文本。它要么溢出或者你可以设置溢出“隐藏”，但比你不会看到任何东西COS股利有大小为0

来源

2013-09-25 11:11:52 webduvet

您的DIV是无形的，看在你实际的div尝试给那个div背景颜色。

[查看演示] http://jsfiddle.net/salwenikhil0724/7qbGX/6/

.triangle { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid blue; 
    background-color:red; 

} 
.triangle p { 
    text-align: center; 
    top: 40px; 
    left: -47px; 
    position: relative; 
    width: 93px; 
    height: 93px; 
    margin: 0px; 
}

来源

2013-09-25 11:29:22

这对于正确显示文本，需要提到的width属性如下： -

<div style="width: 10em; word-wrap: break-word;"> 
    Some longer than expected text with antidisestablishmentarianism 
    </div>

对于水平滚动，你可以把溢出-X：把它隐藏起来，亲爱的。

来源

2013-09-25 12:12:48 kaushik0033

内容出现在div

回答

相关问题