Text fließt aus div

97

Wenn der Text ohne Leerzeichen und mehr als die Div-Größe 200px ist, fließt er heraus. Die Breite ist als 200px definiert. Ich habe meinen Code hier eingegeben. Http://jsfiddle.net/madhu131313/UJ6zG/ Sie können die folgenden Bilder bearbeitet sehen : Ich möchte den Text, um zur nächsten Zeile zu gelangen

Geben Sie hier die Bildbeschreibung ein

css border

— madhu131313
quelle

169

Es liegt an der Tatsache, dass Sie ein langes Wort ohne Leerzeichen haben. Sie können die word-wrapEigenschaft verwenden, um den Text zu beschädigen:

#w74 { word-wrap: break-word; }

Es hat auch ziemlich gute Browser-Unterstützung. Siehe Dokumentation dazu hier .

— Chipcullen
quelle

3

Für mich hat es hier nicht funktioniert, ist ein weiteres Beispiel.

— Deepak Vaishnav

Dies ist fantastisch, löste ein Problem in der

— reaktionsfähigen

Was für eine saubere und einfache Lösung. Vielen Dank für das Teilen.

— Dzenis H.

108

Verwenden

white-space: pre-line;

Dadurch wird verhindert, dass Text aus dem Textfeld fließt div. Der Text wird am Ende des Textes unterbrochen div.

— Nixon
quelle

28

Sie sollten overflow:hidden; oder verwendenscroll

http://jsfiddle.net/UJ6zG/1/

oder mit php könnte man die langen wörter kurz fassen ...

Awesome.sorry zu erwähnen, ich möchte, dass es in die nächste Zeile wie Google Mail-Chat oder Facebook-Chat geht :)

— madhu131313

Dann können Sie die Version von @chipcullen mit Zeilenumbruch verwenden! Demo: jsfiddle.net/UJ6zG/3

8

Sie müssen die folgende CSS-Eigenschaft auf den Containerblock (div) anwenden:

overflow-wrap: break-word;

Gemäß den Spezifikationen (Quelle CSS | MDN ):

Die overflow-wrapCSS-Eigenschaft gibt an, ob der Browser Zeilenumbrüche in Wörter einfügen soll, um zu verhindern, dass Text über das Inhaltsfeld läuft.

Mit dem Wert auf break-word

Um ein Überlaufen zu verhindern, können normalerweise unzerbrechliche Wörter an beliebigen Punkten unterbrochen werden, wenn die Zeile keine ansonsten akzeptablen Unterbrechungspunkte enthält.

Erwähnenswert...

Die Eigenschaft war ursprünglich eine nicht standardmäßige und nicht vordefinierte Microsoft-Erweiterung namens word-wrapund wurde von den meisten Browsern mit demselben Namen implementiert. Es ist seit umbenannt worden overflow-wrapmit, word-wrapist ein Alias.

Wenn Sie sich für die Unterstützung älterer Browser interessieren, sollten Sie beides angeben:

word-wrap    : break-word;
overflow-wrap: break-word;

Ex. IE9 erkennt nicht overflow-wrap, funktioniert aber gut mitword-wrap

— Paolo
quelle

Danke, es hat bei mir funktioniert. Du hast geschrieben "Mit dem Wert auf Break-World" - ich bin mir ziemlich sicher, dass du "Break-Word" ohne das "l" gemeint hast, ich hoffe, du wolltest nicht die Welt brechen;)

— Jake Neumann

7

Wenn overflow:autoSie es verwenden, erhalten Sie einen Scroller für Ihren Text innerhalb des div:).

— Rahul Razdan
quelle

4

Wenn das hilft. Fügen Sie Ihrer Auswahl die folgende Eigenschaft mit Wert hinzu:

white-space: pre-wrap;

— Martin Lloyd Jose
quelle

2

Das hat den Trick für mich getan:

{word-break: break-all; }

— Addo
quelle

1

Vielen Dank, dies war das einzige, was für mich funktioniert hat (mit gestylten Komponenten in React)

— mlz7

0

Ich bin vor kurzem darauf gestoßen. Ich benutzte:display:block;

— arn-arn
quelle

-6

Wenn es nur eine Instanz ist, die über 2 oder 3 Zeilen umbrochen werden muss, würde ich nur einige <wbr>in der Zeichenfolge verwenden. Diese werden genauso behandelt, <br>aber der Zeilenumbruch wird nicht eingefügt, wenn dies nicht erforderlich ist.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

Hier ist eine Geige.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/

— gaby de wilde
quelle