Umbrechen Sie den gesamten Bereich auf neue Zeile, wenn nicht passt

8

Ich habe zwei Kinder divs 20% und 80%. Der letzte enthält verschachtelte span s und im Falle, dass Text nicht in dieselbe Zeile passt, wird er in der nächsten Zeile um ein einzelnes Wort verschoben (Standardverhalten).

HTML:

%Vor%

CSS:

%Vor%

Aber ich muss das nächste Ergebnis erzielen, wenn der Text in der Spanne nicht in die Zeile passt und die gesamte Spanne in die nächste Zeile verschoben wird.

Ich habe es schon versucht:

%Vor%

Dies verschiebt den Text nicht in die nächste Zeile, sondern macht zuerst div kleiner, um freien Platz für Text zu erhalten. Dies ist kein wünschenswertes Verhalten.

Und ich möchte erreichen:

Ist es möglich, ein solches Ergebnis nur mit CSS zu erzielen?

    
CROSP 27.06.2016, 14:24
quelle

3 Antworten

8

Das <span> -Tag ist standardmäßig inline, sodass der darin enthaltene Text beim Umbrechen unterbrochen wird. Sie können es auf display: inline-block setzen, so dass es als gesamter Block auch inline-Ebene bleibt. Beachten Sie, dass das Umbrechen immer noch möglich ist, jedoch nur, wenn die Textlänge den übergeordneten Container überschreitet.

%Vor%
  

display: inline-block Das Element generiert ein Blockelementfeld, das mit dem umgebenden Inhalt wie mit einer einzelnen Inline-Box geflossen ist (ähnlich wie ein ersetztes Element) - MDN

Und für das Layout, das Sie erreichen möchten, können Sie den Text "Mehr lesen" in ein <a> -Tag einfügen und den Button-Link-Stil anstelle der Tabellenzelle festlegen, siehe die aktualisierte Demo unten.

jsFiddle

%Vor% %Vor%

Sie werden vielleicht feststellen, dass dieselbe margin gegeben ist, aber der Abstand links / rechts und der Abstand oben / unten im Beispiel nicht identisch ist. Folgen Sie dazu diesen Beitrag , wenn Sie es Pixel perfekt brauchen.

AKTUALISIEREN

Es gibt einen besseren Weg dazu, nämlich CSS3 flexbox , schau dir den Ausschnitt unten an.

jsFiddle

%Vor% %Vor%
    
Stickers 27.06.2016, 14:33
quelle
6

Versuchen Sie Folgendes:

%Vor%

Ein inline-block -Element ist eine Einheit, die immer ein Block bleibt (aber innerhalb des Textflusses), der nur als Ganzes verschoben und nicht geteilt werden kann.

    
Johannes 27.06.2016 14:28
quelle
2

Sie verwenden display: table und das Verhalten der Größenanpassung Ihrer divs ist deswegen. Ich würde empfehlen, Ihre Anzeige in inline-block zu ändern, wie in der obigen Antwort angegeben, und vertikal durch line-height

auszurichten     
Kiss 27.06.2016 14:32
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie testen Sie Einheit-ASP.NET Core MVC-Controller, die anonyme Objekte zurückgeben?