Limita larghezza del bordo alla larghezza del testo in un elemento di blocco

Question

Ho un titolo <h2> in un valore fisso con (238px). Quando si esegue il rendering di questa pagina, il browser gestisce le interruzioni di riga nel titolo per rendere il testo adatto alla larghezza (238 px).

Ma la proprietà width dell'elemento h2 è ancora 238px, non importa dove sono le interruzioni di riga.

Desidero impostare un border-bottom solo sotto il testo e non sotto la larghezza completa dell'elemento h2 e non so come ottenere ciò utilizzando il CSS.

Si può vedere quello che voglio dire qui: http://jsfiddle.net/np3rJ/2/

Grazie

Answer 1

Se si desidera utilizzare display: table-cell e pseudo-elementi, è possibile avere una soluzione piuttosto buona (con alcune limitazioni minori).

Il codice HTML non cambia:

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

e si può applicare il seguente 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%; 
} 

Per l'elemento <h2>, impostare display: table-cell, e aggiungere un pseudo-elemento dopo .dossier_titre (la contenente il blocco per l'intestazione/elemento titolo). Lo pseudo-elemento è anche un table-cell e ha una larghezza del 100% (questa è la chiave).

Inoltre, poiché h2 non è più un elemento di blocco, aggiungere i margini a .dossier_titre per mantenere la spaziatura visiva nel nostro layout.

come funziona
sto creando una tabella a due celle con la seconda cella (lo pseudo-elemento) avente una larghezza di 100%.Ciò fa sì che il browser calcoli la larghezza di restringimento per la prima cella (h2) che contiene il testo del titolo. La larghezza della prima cella è quindi il minimo necessario per visualizzare il testo. Il bordo inferiore è lungo quanto la riga di testo più lunga nel blocco di testo all'interno della cella della tabella.

Limitazioni
table-cell non è supportato in IE7 senza un hack, ma il work-around è abbastanza noto e può essere trovato, se necessario.

Se il titolo contiene molte parole brevi, è possibile che la linea si interrompa in luoghi inattesi. Dovresti inserire &nbsp per mantenere insieme parole specifiche, se necessario.

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

Answer 2

Forse display: inline-block; O display: inline; è quello che serve?

Answer 3

Perché non provi:

text-decoration:underline 

?

EDIT

Basta fare un arco intorno "opportunita" con la sottolineatura.

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

Answer 4

Penso che questo sia quello che vi serve:

<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 questo violino: http://jsfiddle.net/b8cwD/4/

ho usato la tecnica descritta in questa risposta: Advanced CSS challenge: underline only the final line of text with CSS

ho introdotto un span in il H2 per non modificare l'attributo di visualizzazione di esso, ma si potrebbe altrettanto facilmente usa la stessa tecnica con un display: inline sul tuo H2.

Answer 5

Prova questa, (penso che vi aiuterà a)

.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%; 
}