CSS-Überlauf nach links schweben

8

Ich habe ein div, das zwei Zeilen enthält. Die oberste Zeile ist der Titel und die untere Zeile ist der Name.

Wenn der Titel kurz genug ist, befindet sich der Name in der unteren Zeile (linkes Bild)

Wenn der Titel jedoch lang ist, möchte ich, dass der Überlauf in die zweite Zeile geht und der Name daneben wie im rechten Bild angezeigt wird.

Könnte mir jemand dabei helfen?

Hier ist die HTML-Struktur:

%Vor%     
HEYHEY 27.05.2016, 21:50
quelle

2 Antworten

3

CSS-Trick. Setzen Sie den Namen auf die nächste Zeile oder auf dieselbe Zeile

Ich habe das Pseudo-Element : erste Zeile verwendet die Eigenschaft Wortabstand .

Wenn die erste Zeile kurz ist, wird der Name in die nächste Zeile geschrieben. Wenn die erste Zeile lang ist, wird der Name in derselben Zeile platziert.

Bitte überprüfen Sie das Ergebnis: Codepen , jfiddle .

%Vor% %Vor%
    
Gleb Kemarsky 04.06.2016, 21:13
quelle
0

Wenn der Titel beispielsweise ein <h1> -Tag ist, verwenden Sie CSS-Stil:

%Vor%     
devwraps 27.05.2016 22:09
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Ändern der Bitrate von Exo Player