Wie kann ich langen Text / Wort in einer festen Breite umbrechen oder brechen?

104

Ich möchte eine Spanne mit einer festen Breite erstellen, die, wenn ich etwas in die Spanne eintippe <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, wie eine lange Zeichenfolge von Text ohne Abstand, die Wörter in die nächste Zeile umbricht oder umbricht.

Irgendwelche Ideen?

html css

— محمد کثیری
quelle

191

Sie können die CSS-Eigenschaft verwenden word-wrap:break-word;, mit der Wörter unterbrochen werden, wenn sie für Ihre Bereichsbreite zu lang sind.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Erweitern Sie das Snippet

— Maxime Lorant
quelle

1

Funktioniert gut für die asp.net-Etikettensteuerung. Vielen Dank!

— etlds

41

Das Hinzufügen white-space: normalhilft, das äußere Styling zu überschreiben, das im Weg stehen könnte :) .. inline-blockfunktioniert genauso gut wieblock

— Katia

Was ist mit zwei Abschnitten, die sich innerhalb eines Blockelements befinden?

— Daniel Springer

Wenn Sie nach der Verwendung dieser Antwort immer noch Probleme haben, geben Sie unbedingt eine 'Breite' an, da dies sonst möglicherweise nicht funktioniert

— Staccato,

Es muss eine Breite haben, um zu wissen, wo zu brechen ist

— DFSFOT

40

Versuchen Sie folgendes CSS mit dem Zusatz von white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

— Gerard de Visser
quelle

5

Vielen Dank! Ich konnte nicht herausfinden, warum mein Text nie umbrochen wurde! Leerraum war der Grund.

— mdiehl13

1

Mein Problem wurde auch behoben, als ich white-space: normal

— sagte

Hier ist eine Referenztabelle für den Fall, dass Sie Leerzeichen und Zeilenumbruch

— Hritik

16

So was

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

— Falguni Panchal
quelle

Mein Freund, den ich möchte, wenn die Spannweite eingestellt wird: 50px; Werte in meiner Spanne werden nur in 50px angezeigt und andere Werte gehen zur nächsten Zeile und werden in 50px angezeigt !!!

— کثیری

1

@ mamal10 Überprüfen Sie die Lösung von Maxime Lorant.

— Mr_Green

3

Standardmäßig spanist a ein inlineElement ... das ist also nicht das Standardverhalten.

Sie können das spanVerhalten auf diese Weise ändern display: block;, indem Sie es Ihrem CSS hinzufügen .

span {
    display: block;
    width: 100px;
}

1

Versuche dies

span {
    display: block;
    width: 150px;
}

— Eswara Reddy
quelle

0

Nur um den praktischen Umfang der Frage zu erweitern und als Anhang zu den gegebenen Antworten: Manchmal kann es notwendig sein, die Selektoren etwas genauer anzugeben.

Wenn Sie die gesamte Spanne als display: inline-block definieren , fällt es Ihnen möglicherweise schwer, Bilder anzuzeigen.

Deshalb definiere ich lieber eine Spanne wie folgt:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

— Leopold
quelle

0

In meinem Fall hat display: block das Design wie beabsichtigt beschädigt.

Das max-widthAnwesen hat mich gerade gerettet.

und für das Styling können Sie auch verwenden text-overflow: ellipsis.

Mein Code war

max-width: 255px
overflow:hidden

— sh6210
quelle