Wie erzwingen Sie Text in der nächsten Zeile zu brechen?

Question

Ich habe ein Problem mit einem langen Wort: mein Wort geht aus der Box. Gibt es eine Lösung so, wenn ich zum Beispiel dieses Wort lksadlkasdjlaksdjasdasjdklsajdlaskdaskldjasdkladja haben, zu verhalten wie diese lksadlkasdjlaksdjasdasjdk- ​​NÄCHSTE row-> jdlaskdaskldjasdkladja

Irgendwelche Vorschläge?

Answer 1

Sie können dazu css word-break oder overflow-wrap verwenden. Fügen Sie auch css hyphens hinzu, um Ihren Lesern die Pausen anzuzeigen.

Überlauf-wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Wort-Pause: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Hinweis: Im Gegensatz zu dem Wortbruch, Überlauf-wrap schaffen wird nur eine Pause, wenn ein ganzes Wort kann nicht auf einer eigenen Linie platziert werden, ohne zu überlaufen.

Bindestriche: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Beide Beispiele unten:

span { 
 
    background: #eee; 
 
    width:150px; 
 
    height:auto; 
 
    display:block; 
 
    margin-bottom: 1rem; 
 
} 
 

 
span:nth-child(1){ 
 
    word-wrap: break-word; 
 
    hyphens: auto; 
 
} 
 

 
span:nth-child(2){ 
 
    overflow-wrap: break-word; 
 
    hyphens: auto; 
 
}

<span>abcdefghijklmnopqrstuvwxyz</span> 
 
<span>abcdefghijklmnopqrstuvwxyz</span>

Answer 2

Sie könnten word-wrap: break-word; verwenden, um die langen Strings zu unterbrechen.

span{ 
 
    border:1px solid red; 
 
    width:50px; 
 
    height:50px; 
 
    display:block; 
 
    word-wrap: break-word; 
 
    overflow: hidden; 
 
}

<span>jhfhgfhfghdfghdgfdfgdfgdfgdgfdghdgfdgfdgfdgfcgfvchgchvhvhgvchghg</span>

Answer 3

Wenn Sie wissen, * wo * Sie das Wort teilen mögen, können Sie einen "weichen Bindestrich" verwenden: Fügen Sie diesen Code an der gewünschten Position: ­

Wenn die Behälter ist groß genug ist, wird das Wort als eine angezeigt werden, wenn nicht, ist es an dem weichen Bindestrich brechen:

.a { 
 
width: 200px; 
 
border: 1px solid #ddd; 
 
} 
 

 
.b { 
 
width: 400px; 
 
border: 1px solid #ddd; 
 
}

<p class="a">lksadlkasdjlaksdjasdasjdk&shy;jdlaskdaskldjasdkladja</p> 
 
<p class="b">lksadlkasdjlaksdjasdasjdk&shy;jdlaskdaskldjasdkladja</p>

Hinweis: Es gibt word-wrap: break-word;, aber es wird auch kürzere Wörter brechen.