it-swarm.com.de

Beschränkt die Rahmenbreite auf die Textbreite in einem Blockelement

Ich habe ein <h2> Titel in eine feste mit <div> (238px). Wenn diese Seite gerendert wird, bricht die Browser-Verwaltungszeile in den Titel ein, damit der Text der Breite (238 Pixel) entspricht.

Die width -Eigenschaft des h2 -Elements beträgt jedoch immer noch 238px, unabhängig davon, wo die Zeilenumbrüche liegen.

Ich möchte ein border-bottom nur unter dem Text und nicht unter der vollen Breite des h2-Elements, und ich weiß nicht, wie ich das mit CSS erreichen kann.

Sie können hier sehen, was ich meine: http://jsfiddle.net/np3rJ/2/

Vielen Dank

23
Vince

Wenn Sie bereit sind, display: table-cell Und Pseudoelemente zu verwenden, können Sie eine ziemlich gute Lösung haben (mit einigen geringfügigen Einschränkungen).

Das HTML ändert sich nicht:

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

und Sie können das folgende CSS anwenden:

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

Setzen Sie für das Element <h2>display: table-cell Und fügen Sie nach .dossier_titre Ein Pseudoelement hinzu (den enthaltenden Block für das Kopf-/Titelelement). Das Pseudoelement ist ebenfalls ein table-cell Und hat eine Breite von 100% (dies ist der Schlüssel).

Da h2 Kein Blockelement mehr ist, fügen Sie Ihre Ränder zu .dossier_titre Hinzu, um den visuellen Abstand in unserem Layout beizubehalten.

Wie das funktioniert
Ich erstelle eine Tabelle mit zwei Zellen, wobei die zweite Zelle (das Pseudoelement) eine Breite von 100% hat. Dies veranlasst den Browser, die Verkleinerungsbreite für die erste Zelle (h2) Zu berechnen, die den Titeltext enthält. Die Breite der ersten Zelle ist daher das Minimum, das zur Anzeige des Texts benötigt wird. Der untere Rand ist so lang wie die längste Textzeile im Textblock innerhalb der Tabellenzelle.

Einschränkungen
table-cell Wird in IE7 ohne Hack nicht unterstützt, aber die Problemumgehung ist ziemlich bekannt und kann bei Bedarf gefunden werden.

Wenn der Titel viele kurze Wörter enthält, kann es vorkommen, dass die Zeile an unerwarteten Stellen unterbrochen wird. Sie müssten &nbsp Eingeben, um bestimmte Wörter nach Bedarf zusammenzuhalten.

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

11
Marc Audet

Ich denke das ist was du brauchst:

<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: ""
}

Arbeitsdemo in jsFiddle

Ich habe die in dieser Antwort beschriebene Technik angewendet: Erweiterte CSS-Herausforderung: Unterstreiche nur die letzte Textzeile mit CSS

Ich habe ein span in den H2 Eingefügt, um das Anzeigeattribut nicht zu ändern, aber Sie können die gleiche Technik auch mit einem display: inline Auf Ihrem H2 anwenden.

13
Laurent S.

Könnte sein display: inline-block; Oder display: inline; ist was du brauchst?

9
hakazvaka

Warum nicht versuchen:

text-decoration:underline

?

BEARBEITEN

Machen Sie einfach einen Bogen um "OPPORTUNITÉS" mit der Unterstreichung.

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

Kann die Eigenschaft "text-underline-position" anstelle von Tabellenzelle und Rahmen verwenden. Mach es einfach!

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

Versuchen Sie dies, (ich denke, es wird Ihnen helfen)

.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

Dies funktioniert in Chrome.

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