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

Question

我有<h2>一个固定的标题<div>(238px).呈现此页面时,浏览器管理行中断标题以使文本适合宽度(238px).

但是h2元素的width属性仍然是238px,不管断行是什么.

我想border-bottom在文本下面设置一个,而不是在h2元素的全宽下,我不知道如何使用CSS实现这一点.

你可以在这里看到我的意思:http://jsfiddle.net/np3rJ/2/

谢谢

Answer 1

我想这就是你需要的:

<h2><span>Horizon 2020, nouvelles opportunités<span></h2>

cfr这个小提琴:http://jsfiddle.net/b8cwD/4/

我使用了本答案中描述的技术:高级CSS挑战:仅使用CSS强调文本的最后一行

我介绍了一个span到H2为了不改变它的显示属性,但你可以很容易地使用了同样的技术display: inline在你的H2.

Answer 2

如果你愿意使用display: table-cell和伪元素,你可以有一个很好的解决方案(有一些小的限制).

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>元素,设置display: table-cell并添加一个伪元素.dossier_titre(包含标题/标题元素的块).伪元素也是a table-cell,宽度为100%(这是关键).

此外,由于h2不再是块元素,因此请添加边距.dossier_titre以保持布局中的可视间距.

工作原理
我正在创建一个双单元格表,第二个单元格(伪元素)的宽度为100%.这会触发浏览器计算h2包含标题文本的第一个单元格()的缩小到适合宽度.因此,第一个单元格的宽度是显示文本所需的最小值.底部边框与表格单元格中文本块中最长的文本行一样长.

table-cell没有黑客攻击的IE7不支持限制,但解决方法是众所周知的,如果需要可以找到.

如果标题有很多简短的单词,你可能会在意想不到的地方打破这一行.您需要插入&nbsp以根据需要将特定单词保持在一起.

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

Answer 3

也许display: inline-block;或者display: inline;你需要什么？

Answer 4

这适用于 Chrome。

h2 {
   width: fit-content;
}