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>

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

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

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

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

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

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

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

可以尝试使用“文本下划线位置”属性代替表格单元格和边框。简单点！

text-decoration: underline;
text-underline-position: under;

Answer 6

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

.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 7

这在Chrome上有效。

h2 {
   width: fit-content;
}

Answer 8

您所能做的就是将您的 h2 元素文本放入 span 中，如下所示：

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

并在 css 中从 .zone_33 h2 {} 中删除 border-bottom 并像这样放置：

.zone_33 h2 span{ border-bottom: 1px solid grey;}

通过这个边框底部将出现在全文之下。

Answer 9

您可以放置一个边框底部并更改 h2 的宽度，以便边框长度与您的 h2 长度相匹配。将宽度调整为 h2 的宽度，考虑到它的字体大小。然后为您的 h2 添加一个 padding-bottom 并根据您的喜好进行设置。

    <h2>Cats</h2>
    h2{
    border-bottom: 5px solid black;
    font-size: 16px;
    padding-bottom: 5px;
    width: 64px;
    }

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

9 个答案:

Working demo in jsFiddle