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

Question

我有一个<h2>标题固定与<div>（238px）。呈现此页面时，浏览器管理行中断标题以使文本适合宽度（238px）。

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

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

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

谢谢

Answer 1

如果你愿意使用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（标题/标题元素的包含块）之后添加一个伪元素。伪元素也是table-cell，宽度为100％（这是关键）。

此外，由于h2不再是块元素，因此请将您的边距添加到.dossier_titre以保持布局中的视觉间距。

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

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

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

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

Answer 2

我想这就是你需要的：

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

h2 span {
    position: relative;
    padding-bottom: 5px;
}
h2 span::after{
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    border-bottom: 1px solid #000; 
    content: ""
}

Working demo in jsFiddle

我使用了这个答案中描述的技术：Advanced CSS challenge: underline only the final line of text with CSS

我在span中引入了一个H2，以便不改变它的显示属性，但你可以像在H2上使用display: inline一样轻松地使用相同的技术。

Answer 3

也许display: inline-block;或display: inline;是你需要的？

Answer 4

为什么不尝试：

text-decoration:underline

?

编辑

用下划线围绕“OPPORTUNITÉS”进行调整。

 <h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
    text-decoration:underline
}

Answer 5

试试这个，（我认为它会对你有帮助）

.heading {
    position: relative;
    color: $gray-light;
    font-weight: 700;
    bottom: 5px;
    padding-bottom: 5px;
    display:inline-block;
}

.heading::after {
    position: absolute;
    display:inline-block;
    border: 1px solid $brand-primary !important;
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    width: 100%;
}

Answer 6

这适用于Chrome。

h2 {
   width: fit-content;
}