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

Question

我正在寻找可能会破坏 HTML 行（例如空格）的字符和元素的列表，但我在 Internet 上找不到任何包含正常 HTML 换行行为定义的页面。我找到了那些：

• 可分割的空间，
• 标签，
• 新队
• 零宽度空间（亚洲）
• 较少的 ”-”
• 软连字符

当然，我不希望它打破“pre”标签！

Answer 1

如果我理解正确的话，您想知道哪些字符创建了软换行机会，也就是说，它们允许换行以适合度量内的内容。

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

在大多数书写系统中，在没有连字符的情况下，软换行机会仅出现在单词边界处。许多此类系统使用空格或标点符号来明确分隔单词，并且可以通过这些字符来识别软换行机会。然而，泰语、老挝语和高棉语等文字不使用空格或标点符号来分隔单词。尽管零宽度空格 (U+200B) 可以在这些脚本中用作显式单词分隔符，但这种做法并不常见。

[...]CSS 没有完全定义软包装机会发生的位置，但是提供了一些控件来区分常见的变化。

您可以使用一些 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%;
}