我有一个< h2>标题变为固定的< div> (238px).当这个页面被渲染时,浏览器管理行会打破标题,使文本适合宽度(238px).
但是h2元素的width属性仍然是238px,没有任何换行符.
我想在文本下面设置一个边框底部,而不是在h2元素的整个宽度下,我不知道如何使用CSS来实现这一点.
你可以在这里看到我的意思：http://jsfiddle.net/np3rJ/2/
谢谢
解决方法
如果你愿意使用display：table-cell和pseudo-elements,你可以有一个很好的解决方案(有一些小的限制).
HTML不会更改：
<div class="dossier_titre">
<h2>Horizon 2020,nouvelles opportunités</h2>
</div>
您可以应用以下CSS：
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
对于< h2>元素,设置显示：table-cell,并在.dossier_titre(头/标题元素的包含块)之后添加一个伪元素.伪元素也是一个表格单元格,宽度为100％(这是关键字).
此外,由于h2不再是块元素,所以将边距添加到.dossier_titre以维护我们的布局中的视觉间距.
如何运作
我正在创建具有宽度为100％的第二个单元格(伪元素)的双单元格表.这将触发浏览器计算包含标题文本的第一个单元格(h2)的缩小到适合宽度.因此,第一个单元格的宽度是显示文本所需的最小值.底部边框与表单元格中文本块中最长的文本行一样长.
限制
IE7中不支持桌面单元格,但是它的解决方法是相当熟知的,如果需要,可以找到它.
如果标题有很多短语,你可能会在意想不到的地方找到线.您需要根据需要插入& nbsp以保持特定的单词.
