css – 将边框宽度限制为块元素中的文本宽度

我有一个< 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以保持特定的单词.

小提琴：http://jsfiddle.net/audetwebdesign/h34pL/