CSS 将边框宽度限制为块元素中的文本宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16399232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restrict border width to text width in a block element
提问by Vince
I have an <h2>title into a fixed with <div>(238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
我有一个<h2>标题固定为<div>（238px）。呈现此页面时，浏览器会管理标题中的换行符，以使文本适合宽度（238 像素）。
But the width property of the h2 element is still 238px, no matters where the line breaks are.
但是 h2 元素的 width 属性仍然是 238px，不管换行在哪里。
I want to set a border-bottomonly under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
我想border-bottom只在文本下设置 a ，而不是在 h2 元素的全宽下，我不知道如何使用 CSS 实现这一点。
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
你可以在这里看到我的意思：http: //jsfiddle.net/np3rJ/2/
Thanks
谢谢
采纳答案by Marc Audet
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
如果你愿意使用display: table-cell, 和伪元素，你可以有一个很好的解决方案（有一些小限制）。
The HTML does not change:
HTML 不会改变：
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
您可以应用以下 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%;
}
For the <h2>element, set display: table-cell, and add a pseudo-element after .dossier_titre(the containing block for the header/title element). The pseudo-element is also a table-celland has a width of 100% (this is the key).
对于<h2>元素，设置display: table-cell，并在.dossier_titre（标题/标题元素的包含块）之后添加一个伪元素。伪元素也是a table-cell，宽度为100%（这是关键）。
Also, since h2is no longer a block element, add your margins to .dossier_titreto maintain the visual spacing in our layout.
此外，由于h2不再是块元素，请添加边距.dossier_titre以保持布局中的视觉间距。
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
这
是如何工作的我正在创建一个双单元格表格，其中第二个单元格（伪元素）的宽度为 100%。这会触发浏览器计算h2包含标题文本的第一个单元格 ( )的缩小以适应宽度。因此，第一个单元格的宽度是显示文本所需的最小宽度。底部边框与表格单元格内文本块中最长的文本行一样长。
Limitationstable-cellis not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
table-cell没有 hack 的 IE7 不支持限制，但解决方法是众所周知的，如果需要可以找到。
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert  to keep specific words together as needed.
如果标题有很多简短的词，您可能会在意想不到的地方断行。您需要根据需要插入 以将特定单词保持在一起。
回答by Laurent S.
I think this is what you need:
我认为这就是你需要的：
<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
jsFiddle 中的工作演示
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
我使用了这个答案中描述的技术：高级 CSS 挑战：只用 CSS 给最后一行文本划下划线
I introduced a spaninto the H2in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inlineon your H2.
我介绍了一个span到H2为了不改变它的显示属性，但你可以很容易地使用了同样的技术display: inline在你的H2。
回答by hakazvaka
Maybe display: inline-block;Or display: inline;is what you need?
也许display: inline-block;或者display: inline;是你需要的？
回答by Santiago Rebella
Why not try:
为什么不试试：
text-decoration:underline
?
?
EDIT
编辑
Just make a span around "OPPORTUNITéS" with the underline.
只需在“OPPORTUNITéS”周围加上下划线。
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
回答by Ellie M
This works on Chrome.
这适用于 Chrome。
h2 {
width: fit-content;
}
回答by Ronald Dsouza
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
可以尝试“文本下划线位置”属性而不是表格单元格和边框。让它变得简单！
text-decoration: underline;
text-underline-position: under;
回答by Jitesh Sinha
Try this, (I think it will help you)
试试这个，（我认为它会帮助你）
.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%;
}
