在塊元素中限制邊框寬度爲文本寬度

我將<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

在塊元素中限制邊框寬度爲文本寬度

回答

相關問題