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

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

Mais la propriété width de l'élément h2 est encore 238px, pas de questions où les sauts de ligne sont.

Je veux mettre un border-bottom seulement sous le texte, et non pas de la totalité de la largeur de l'élément h2, et je ne sais pas comment réaliser cela à l'aide de CSS.

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

Grâce

OriginalL'auteur Vince | 2013-05-06

9

Si vous êtes prêt à utiliser display: table-cell, et les 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 code 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 la <h2> élément, un ensemble display: table-cell, et ajouter un pseudo-élément après .dossier_titre (le bloc contenant l'en-tête/titre de l'élément). Le pseudo-élément est aussi un table-cell et a une largeur de 100% (ce qui est la clé).

Aussi, depuis h2 n'est plus un élément de bloc, ajouter vos marges de .dossier_titre pour maintenir l'espacement visuel à notre disposition.

Comment Cela Fonctionne

Je suis la création de deux cellules de la table avec la deuxième cellule (le pseudo-élément) ayant une largeur de 100%. Cela déclenche le navigateur pour calculer la réduction d'ajustement de la largeur de la première cellule (h2) qui contient le texte du titre. La première cellule de la largeur est donc le minimum requis pour afficher le texte. La bordure en bas est aussi longue que la plus longue ligne de texte dans le bloc de texte à l'intérieur de la table-cell.

Limitations

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

Si le titre avait beaucoup de mots courts, vous pourriez obtenir une rupture de la ligne dans des endroits inattendus. Vous devez insérer &nbsp de garder certains mots ensemble en tant que de besoin.

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

plus un affichage cellule de tableau pour le chemin \o/

OriginalL'auteur Marc Audet
9

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

J'ai utilisé la technique décrite dans cette réponse: Avancée des CSS défi: souligner que la dernière ligne de texte avec CSS

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

Ne fonctionne pas avec Firefox 19.0.2) mais fonctionne très bien sur Chrome. De toute façon, c'est un bel état de l'art de la solution.
Fonctionne sur Firefox 57.0+ maintenant, et est plus simple que la réponse choisie. Merci.

OriginalL'auteur Laurent S.
7

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

Je seconde cette réponse. Changement inline-block à la volée, et de supprimer les bas-rembourrage (le reste de vos frontières seront déplacés).
De cette façon, j'obtiens le souligner sur chaque ligne de texte, ce n'est pas ce dont j'ai besoin.

OriginalL'auteur hakazvaka
2

Pourquoi ne pas essayer:
```
text-decoration:underline
```
?

MODIFIER

Il suffit de faire une durée de autour de "OPPORTUNITÉS" avec le souligner.
```
 <h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
    text-decoration:underline
}
```
Je veux la frontière que sous le bloc de texte, pas sous chaque ligne.
C'est une solution intelligente et facile à mettre en œuvre.
J'ai utilisé la durée de l'idée de @Santiago pour appliquer une bordure à fond de l'élément. De cette façon, je pouvais lui donner une couleur et d'épaisseur poids et encore seulement d'appliquer le souligner à la largeur du texte et de ne pas la bloquer l'élément de menu de niveau. li:hover > span { border-bottom: 2px solid green; }

OriginalL'auteur Santiago Rebella

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

OriginalL'auteur Jitesh Sinha

0

Cela fonctionne sur Chrome.
```
h2 {
   width: fit-content;
}
```
OriginalL'auteur Ellie M

Vous devez vous connecter pour publier un commentaire.