Was ist normales HTML-Zeilenumbruchverhalten?

Question

Ich bin auf der Suche nach einer Liste von Zeichen und Elementen, die HTML-Zeilen wie Whitespaces brechen können, aber ich kann keine Seite im Internet mit einer Definition des normalen HTML-Zeilenumbruchverhaltens finden. Ich habe diejenigen gefunden:

• parzellierbar Raum,
• Registerkarte
• neue Linie
• Null-Breite Raum (asiatische)
• weniger "-"
• Soft Bindestrich

Ich erwarte nicht, dass es in der "Pre" -Marke natürlich bricht!

Answer 1

Wenn ich richtig verstehe, möchten Sie wissen, welche Zeichen eine soft wrap opportunity erstellen, das heißt, sie ermöglichen einen Zeilenumbruch, um den Inhalt innerhalb der Kennzahl zu passen.

Die Antwort ist, dass es nicht vollständig definiert ist, und hängt von der Sprache:

In den meisten Schriftsystemen, in Abwesenheit von hyphenation ein soft wrap opportunity tritt nur an Wortgrenzen. Viele dieser Systeme verwenden Leerzeichen oder Interpunktionszeichen, um Wörter explizit zu trennen, und soft wrap opportunities können durch diese Zeichen identifiziert werden. Skripte wie Thai, Lao und Khmer, verwenden jedoch keine Leerzeichen oder Interpunktion zu separaten Wörtern. Obwohl in diesen Skripten der Platzhalter mit der Breite Null (U + 200B) als ein explizites Worttrennzeichen verwendet werden kann, ist diese Vorgehensweise nicht .

[...] CSS definiert nicht vollständig, wo Soft-Wrap-Möglichkeiten auftreten, aber einige Steuerelemente sind vorgesehen, um häufige Variationen zu unterscheiden.

Sie können dieses Verhalten teilweise steuern

line-break, einige CSS-Eigenschaften wie

mit mit Satzzeichen und Symbole, um festzulegen, wie Verpackung
• word-break, interagiert die
zwischen den Buchstaben weichen Wickelmöglichkeiten zulassen
• hyphens, um zu steuern, ob die Silbentrennung mehr weiche Umhüllungsmöglichkeiten erzeugen kann
• overflow-wrap/word-wrap, die innerhalb eines Wortes willkürlichen Pausen erlauben kann Überlauf

zu verhindern Wenn Sie die vollständige Liste der Zeichen wollen, die eine weiche Wrap Gelegenheit schaffen, können Sie JS verwenden:

var log = console.log; 
 
console.log = Function.prototype; 
 
console.config({maxEntries: Infinity}); 
 
console.log = log; 
 

 
var test = document.createElement('div'); 
 
test.className = 'test'; 
 
document.body.appendChild(test); 
 
for (var i=0; i<0xffff; ++i) { 
 
    var char = String.fromCharCode(i); 
 
    test.textContent = 'a' + char + 'b'; 
 
    if (test.clientHeight > 1) { 
 
    console.log(i.toString(16) + ': ' + JSON.stringify(char)); 
 
    } 
 
} 
 
document.body.removeChild(test);

.test { 
 
    width: 0; 
 
    line-height: 1px; 
 
} 
 
div.as-console-wrapper { 
 
    max-height: 100%; 
 
}