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

我将<h2>标题固定为<div>（238px）。当这个页面被渲染时，浏览器管理行标题以使文本符合宽度（238px）。在块元素中限制边框宽度为文本宽度

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

我想成立一个border-bottom只有在文本，而不是在h2元素的整个宽度，我不知道如何做到这一点使用CSS。

你可以明白我的意思是：http://jsfiddle.net/np3rJ/2/

感谢

来源

2013-05-06 Vince

如果你愿意使用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）的缩小到适合宽度。因此，第一个单元格的宽度是显示文本所需的最小值。底部边框与表格单元格中文本块中最长的文本行一样长。

限制
table-cell没有在IE7没有破解支持，但解决办法是相当著名的，如果需要，都可以找到。

如果标题有很多简短的单词，那么您可能会在意想不到的地方出现断行。您需要插入&nbsp以根据需要保留特定单词。

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

来源

2013-05-06 14:55:33

加上一个显示表格单元格的方式\ o / – 2015-08-17 06:36:08

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

来源

2013-05-06 12:59:54 hakazvaka

我第二这个答案。将内联块更改为内联，并删除底部填充（否则您的边框将被移除）。 – Tyblitz 2013-05-06 13:04:07

这样我就可以在每一行文字上都得到下划线，这不是我所需要的。 – Vince 2013-05-06 13:06:28

为什么不尝试：

text-decoration:underline

？

编辑

只是要围绕“面临的机遇”的跨度有下划线。

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

来源

2013-05-06 13:00:29

我只想在文本块下边框，而不是在每一行下面。 – Vince 2013-05-06 13:03:59

这是一个智能解决方案，易于实施。 – staypuftman 2016-07-06 04:39:28

我使用@Santiago的span思路将border-bottom应用于元素。这样，我可以给它一个颜色和更厚的重量，并且仍然只将下划线应用于文本的宽度，而不是块级菜单项。 li：hover> a span { border-bottom：2px solid green; } – Leraa 2016-10-11 20:56:34

我想这是你所需要的：

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

CFR此琴：http://jsfiddle.net/b8cwD/4/

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

我介绍了一个span成H2为了不改变它的显示属性，但你可以很容易在H2上使用与display: inline相同的技术。

来源

2013-05-06 13:24:50

不适用于Firefox（19.0.2），但适用于Chrome。无论如何，这是最好的解决方案。 – Vince 2013-05-06 14:57:40

现在适用于Firefox 57.0+，比选择的答案简单。谢谢。 – ali14 2018-01-10 12:00:57

试试这个，（我认为这将帮助你）

.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-27 12:47:52

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

回答

相关问题