2

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

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

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

4

1 回答 1

4

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

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

在大多数书写系统中，在没有连字符的情况下，软换行机会仅出现在单词边界处。许多此类系统使用空格或标点符号来明确分隔单词，并且可以通过这些字符识别软换行机会。但是，泰语、老挝语和高棉语等脚本不使用空格或标点符号来分隔单词。尽管零宽度空格 (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%;
}

于 2017-01-28T13:27:45.723 回答