Limiter la largeur de la bordure à la largeur du texte dans un élément de bloc

Question

J'ai un titre <h2> dans un fichier fixe avec <div> (238px). Lorsque cette page est rendue, le navigateur gère les sauts de ligne dans le titre pour que le texte corresponde à la largeur (238px).

Mais la propriété width de l'élément h2 est toujours de 238px, peu importe où les sauts de ligne sont.

Je veux définir un border-bottom uniquement sous le texte, et pas sous la largeur totale de l'élément h2, et je ne sais pas comment y parvenir en utilisant CSS.

Vous pouvez voir ce que je veux dire ici: http://jsfiddle.net/np3rJ/2/

Merci

Answer 1

Si vous souhaitez utiliser display: table-cell, et des pseudo-éléments, vous pouvez avoir une assez bonne solution (avec quelques limitations mineures).

Le code HTML ne change pas:

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

et vous pouvez appliquer le CSS suivant:

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

Pour l'élément <h2>, définissez display: table-cell, et ajouter un pseudo-élément après .dossier_titre (la bloc contenant pour l'élément en-tête/titre). Le pseudo-élément est également un table-cell et a une largeur de 100% (c'est la clé).

En outre, puisque h2 n'est plus un élément de bloc, ajoutez vos marges à .dossier_titre pour maintenir l'espacement visuel dans notre disposition.

Comment This Works
Je crée un tableau à deux cellules de la seconde cellule (le pseudo-élément) ayant une largeur de 100%.Cela déclenche le calcul par le navigateur de la largeur de la première cellule (h2) qui contient le texte du titre. La largeur de la première cellule est donc le minimum nécessaire pour afficher le texte. La bordure inférieure est aussi longue que la ligne de texte la plus longue dans le bloc de texte de la cellule.

Limites
table-cell est pas pris en charge dans IE7 sans un hack, mais le travail autour est assez bien connu et peut être trouvé si nécessaire.

Si le titre contenait de nombreux mots courts, la ligne pourrait se briser à des endroits inattendus. Vous devez insérer &nbsp pour conserver des mots spécifiques ensemble au besoin.

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

Answer 2

Peut-être display: inline-block; Ou display: inline; est-ce que vous avez besoin?

Answer 3

Pourquoi ne pas essayer:

text-decoration:underline 

?

EDIT

Assurez une durée d'environ "OPPORTUNITÉS" avec le soulignement.

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

Answer 4

Je pense que c'est ce que vous avez besoin:

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

J'ai utilisé la technique décrite dans cette réponse: Advanced CSS challenge: underline only the final line of text with CSS

J'introduit un span en le H2 afin de ne pas changer l'attribut d'affichage de celui-ci, mais vous pourriez tout aussi facilement utilisez la même technique avec un display: inline sur votre H2.

Answer 5

Essayez cela, (je pense que ça va vous aider)

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