web-dev-qa-db-ja.com

境界線の幅をブロック要素のテキスト幅に制限する

<h2>（238px）で固定された<div>タイトルがあります。このページがレンダリングされると、ブラウザーはテキストを幅（238px）に合わせてタイトルに改行を管理します。

ただし、h2要素のwidthプロパティは238pxのままです。改行がどこにあるかは関係ありません。

border-bottomをh2要素の幅全体ではなく、テキストの下にのみ設定したいのですが、CSSを使用してこれを実現する方法がわかりません。

ここで私が意味することを見ることができます： http://jsfiddle.net/np3rJ/2/

ありがとう

csscss-floatpositioning
23
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％の2番目のセル（擬似要素）で2セルのテーブルを作成しています。これにより、ブラウザーがトリガーされ、タイトルテキストを含む最初のセル（h2）の縮小幅が計算されます。したがって、最初のセルの幅は、テキストを表示するために最低限必要なものです。下の境界線は、table-cell内のテキストブロック内の最長のテキスト行と同じ長さです。

制限事項
table-cellは、ハックなしでIE7でサポートされていませんが、回避策はかなりよく知られており、必要に応じて見つけることができます。

タイトルに短い単語が多く含まれていると、予期しない場所で改行が入る場合があります。必要に応じて特定の単語をまとめるために&nbspを挿入する必要があります。

フィドル： http://jsfiddle.net/audetwebdesign/h34pL/

11
Marc Audet

私はこれがあなたが必要とするものだと思う：

<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での実演デモ

この回答で説明されている手法を使用しました： 高度なCSSチャレンジ：CSSでテキストの最終行のみに下線を引く

spanをH2に導入して、その表示属性を変更しないようにしましたが、H2のdisplay: inlineでも同じ手法を簡単に使用できます。

13
Laurent S.

多分 display: inline-block;またはdisplay: inline;はあなたが必要なものですか？

9
hakazvaka

試してみませんか：

text-decoration:underline

？

編集

下線で「OPPORTUNITÉS」の周りにスパンを作るだけです。

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

Table-cellとborderの代わりに「text-underline-position」プロパティを試すことができます。それを簡単に！

text-decoration: underline;
text-underline-position: under;
1
Ronald Dsouza

これはChromeで機能します。

h2 {
   width: fit-content;
}
0
Ellie M