html - 什么是正常的 HTML 换行行为？

Question

我正在寻找可能会打断 HTML 行的字符和元素的列表，例如空格，但我无法在 Internet 上找到任何页面来定义什么是正常的 HTML 换行行为。我找到了那些:

• 可分割空间，
• 标签，
• 换行
• 零宽度空间(亚洲)
• 少“-”
• 软连字符

当然，我不希望它在“pre”标签中中断!

Answer 1

如果我没理解错的话，你想知道什么字符创建了一个soft wrap opportunity ，也就是说，它们允许换行以使内容适合度量。

答案是它没有完全定义，并且取决于语言:

In most writing systems, in the absence of hyphenation a soft wrap opportunity occurs only at word boundaries. Many such systems use spaces or punctuation to explicitly separate words, and soft wrap opportunities can be identified by these characters. Scripts such as Thai, Lao, and Khmer, however, do not use spaces or punctuation to separate words. Although the zero width space (U+200B) can be used as an explicit word delimiter in these scripts, this practice is not common.

[...] CSS does not fully define where soft wrap opportunities occur, however some controls are provided to distinguish common variations.

您可以使用一些 CSS 属性来部分控制此行为

• line-break , 指定换行如何与标点和符号交互
• word-break , 这可能允许字母之间的软包装机会
• hyphens , 控制是否允许连字以创造更多的软包装机会
• overflow-wrap/word-wrap , 这可能允许在单词中任意中断以防止溢出

如果你想要创建软包装机会的完整字符列表，你可以使用 JS:

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