30

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

但是h2元素的width属性还是238px，不管换行在哪里。

我只想border-bottom在文本下设置 a ，而不是在 h2 元素的全宽下设置，我不知道如何使用 CSS 来实现。

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

谢谢

4

9 回答 9

17

我认为这是你需要的：

<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: ""
}

jsFiddle 中的工作演示

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

我在中引入了 aspan是H2为了不改变它的显示属性，但是你可以很容易地display: inline在你的 H2 上使用与 a 相同的技术。这种方法将允许控制实际线路，而不是display: inline在需要时进行设置

于 2013-05-06T13:24:50.287 回答
16

如果你愿意使用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伪元素也是 atable-cell并且宽度为 100%（这是关键）。

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

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

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

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

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

于 2013-05-06T14:55:33.717 回答
14

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

于 2013-05-06T12:59:54.470 回答
12

这适用于 Chrome。

h2 {
   width: fit-content;
}
于 2018-06-25T04:26:05.923 回答
3

为什么不试试：

text-decoration:underline

?

编辑

只需用下划线在“机会”周围画一个跨度。

 <h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
    text-decoration:underline
}
于 2013-05-06T13:00:29.717 回答
2

可以尝试“文本下划线位置”属性而不是表格单元格和边框。让它变得简单！ 

text-decoration: underline;
text-underline-position: under;
于 2019-07-01T09:12:00.673 回答
1

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

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

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

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

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

于 2021-07-03T17:27:04.093 回答
0

试试这个，（我想它会帮助你）

.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%;
}
于 2018-01-27T12:47:52.223 回答
-1

您可以放置​​一个边框底部并更改 h2 的宽度，以使边框长度与您的 h2 长度相匹配。考虑到它的字体大小，将宽度调整为 h2 的宽度。然后在您的 h2 中添加一个 padding-bottom 并将其设置为您喜欢的。

    <h2>Cats</h2>
    h2{
    border-bottom: 5px solid black;
    font-size: 16px;
    padding-bottom: 5px;
    width: 64px;
    }
于 2021-03-25T20:28:50.887 回答