web-dev-qa-db-fra.com

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

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

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

Je veux définir un border-bottom uniquement sous le texte, et non sous toute la largeur 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

csscss-floatpositioning
23
Vince

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

Le 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 le <h2> élément, définir display: table-cell, et ajoutez un pseudo-élément après .dossier_titre (le bloc contenant 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é).

De plus, puisque h2 n'est plus un élément de bloc, ajoutez vos marges à .dossier_titre pour maintenir l'espacement visuel dans notre mise en page.

Comment cela fonctionne
Je crée un tableau à deux cellules avec la deuxième cellule (le pseudo-élément) ayant une largeur de 100%. Cela déclenche le navigateur pour calculer la largeur de rétrécissement pour s'adapter à 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 du bloc de texte dans la cellule du tableau.

Limitations
table-cell n'est pas pris en charge dans IE7 sans piratage, mais la solution de contournement est assez bien connue et peut être trouvée si nécessaire.

Si le titre contient de nombreux mots courts, vous risquez de faire sauter la ligne dans des endroits inattendus. Vous devez insérer &nbsp pour regrouper des mots spécifiques selon vos besoins.

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

11
Marc Audet

Je pense que c'est ce dont 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: ""
}

Démo de travail dans jsFiddle

J'ai utilisé la technique décrite dans cette réponse: Défi CSS avancé: souligner uniquement la dernière ligne de texte avec CSS

J'ai introduit un span dans le H2 afin de ne pas en changer l'attribut d'affichage, mais vous pourriez tout aussi bien utiliser la même technique avec un display: inline sur votre H2.

13
Laurent S.

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

9
hakazvaka

Pourquoi ne pas essayer:

text-decoration:underline

?

ÉDITER

Faites juste un tour autour des "OPPORTUNITÉS" avec le soulignement.

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

Peut essayer la propriété "text-underline-position" au lieu de table-cell et border. Faites simple!

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

Essayez ceci (je pense que cela vous aidera)

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

Cela fonctionne sur Chrome.

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