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

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?

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>

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

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

So was

DEMO

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

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;
}

Versuche dies

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

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;
}

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