Wickeln Sie die Zeilen entsprechend der Breite der ersten Zeile

Ich habe einen Link mit Haupttitel und Beschreibung, und ich möchte die Textzeile entsprechend der Breite der ersten Zeile umbrechen. Kann ich das nur mit CSS erreichen?Wickeln Sie die Zeilen entsprechend der Breite der ersten Zeile

Ich habe folgenden Code:

<a href="http://google.com"> 
    <span class="ht">Oficiální stránky</span> 
    <span class="hb">Podívejte se na oficiální web festivalu</span> 
</a>

https://jsfiddle.net/kybernaut/9uh24zns

gewünschte Ausgabe:

Hinweis: es wird mit unterschiedlicher Breite des ersten fett mehr Links in der Linie Titel.

Quelle

2016-06-20 kybernaut.cz

Haben Sie dies versuchen? http://stackoverflow.com/questions/3949762/how-to-wrap-text-using-css bearbeiten: Ich sehe, das ist nicht genau das, was Sie tun. Aber das ist das CSS, das den Sub-Header umschließt. –

Nein, aber ich möchte die Breite nicht manuell einstellen. Es muss automatisch gemacht werden (meine Kunden können die Menüpunkte selbst ändern und es gibt mehr Elemente als eines) –

Sie benötigen Javascript – slashsharp

Sie die CSS table + table-caption Lösung versuchen könnte.

.container { 
 
    display: table; 
 
} 
 
.hb { 
 
    display: table-caption; 
 
    caption-side: bottom; 
 
}

<a class="container" href="#"> 
 
    <span class="ht">FIRST LINE</span> 
 
    <span class="hb">second line some example content here</span> 
 
</a>

jsFiddle

Quelle

2016-06-20 15:19:33 Stickers

Dies ist eine gute Alternative, aber es gibt einige interessante Effekte - https://jsfiddle.net/qn0gj95n/ :) –

Wahr, wie es die Überschrift ist, aber es kann mit dem Anwenden von Grenzen zu beiden von ihnen getan werden - https://jsfiddle.net/qn0gj95n/2/ – Stickers

Vielen Dank, sehr interessante und schnelle Lösung. –

Hier ist sneaky Weise, diesen Effekt zu erzielen.

.limit { 
 
    border: 1px solid red; 
 
    display: table; 
 
    width: 1%; 
 
    
 
} 
 

 
.ht { 
 
    color: black; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    white-space: nowrap; /* stop text wrapping */ 
 
} 
 

 
.hb { 
 
    color: #555; 
 
    font-size: 18px; 
 
    display: block; 
 
}

<a href="http://google.com" class="limit"> 
 
    <span class="ht">Oficiální stránky</span> 
 
    <span class="hb">Podívejte se na oficiální web festivalu</span> 
 
</a>

Quelle

2016-06-20 15:14:22

-1

können Sie

word-wrap-Eigenschaft verwenden, aber keiner der gängigen Browser unterstützen den Text-wrap-Eigenschaft.

.ht { 
 
    color: black; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    display: block; 
 
} 
 

 
.hb { 
 
    color: #555; 
 
    font-size: 18px 
 
} 
 
#wrapDiv{ 
 
    width: 190px; 
 
    word-wrap: normal 
 
}

<div id="wrapDiv"> 
 
    <a href="http://google.com"> 
 
    <span class="ht">Oficiální stránky</span> 
 
    <span class="hb" >Podívejte se na oficiální web festivalu</span> 
 
</a> 
 
</div>

Sie auch beziehen können, ist es gleich wie How to word wrap text in HTML?

Quelle

2016-06-20 15:40:17 Ashutosh

Wickeln Sie die Zeilen entsprechend der Breite der ersten Zeile

Antwort

Verwandte Themen