在块元素中将边框宽度限制为文本宽度 [英] Restrict border width to text width in a block element

问题描述

我有一个< h2> 标题固定为< div> （238px）。当此页面被渲染时，浏览器管理行会打破标题，使文本适合宽度（238像素）。

但是h2元素的width属性仍然

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

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

感谢

解决方案

如果您愿意使用 display：table-cell 伪元素，你可以有一个很好的解决方案（有一些小的限制）。

HTML不会改变：

 < div class =dossier_titre> 
< h2> Horizo​​n 2020，nouvellesopportunitiesité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 gray; 
 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/

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

But the width property of the h2 element is still 238px, no matters where the line breaks are.

I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.

You can see what I mean here : http://jsfiddle.net/np3rJ/2/

Thanks

解决方案

If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).

The HTML does not change:

<div class="dossier_titre">
    <h2>Horizon 2020, nouvelles opportunités</h2>
</div>

and you can apply the following 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-cell and has a width of 100% (this is the key).

Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.

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.

Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.

If the title had many short words, you might get the line breaking in unexpected places. You would need to insert &nbsp to keep specific words together as needed.

Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/

这篇关于在块元素中将边框宽度限制为文本宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！