javascript - 如何将 css 工作中断规则中的句子转换为\n 字符串?

标签 javascript html css

<div style="width:30px;word-break:break-word">
some
</div>
<div>
</div>
<div style="width:10px;word-break:break-word">
words
</div>
<div style="width:50px;word-break:break-word">
wordswo大佬123words
</div>

div box 中有一些单词样式为width。

这些单词按照 css 分词规则换行。

有什么方法可以将它们转换为用\n 分割的字符串,或者我们可以知道哪一行是字符吗?

在demo中,'some'应该是'so\nme','word'应该是'w\no\nr\nd\ns','wordswowords'应该是'words\nwo大\n各位\n 123wo\nrds'

如果全是英文,就显得简单了。但是对于中文,结果变得难以理解。

最佳答案

一种可能的方法涉及“滚动范围”。您在 textNode 中移动它,检查其高度变化的点。像这样:

function getWordsByLines(textNode) {
  const words = [];

  const textLength = textNode.data.length;
  const range = textNode.parentNode.ownerDocument.createRange();
  range.selectNodeContents(textNode);

  let prevHeight = NaN;
  let prevWord = '';
  let rangeEnd = 0;
  while (rangeEnd <= textLength) {
    range.setEnd(textNode, rangeEnd);
    const box = range.getBoundingClientRect();
    if (prevHeight < box.height) {
      words.push(prevWord);
      prevHeight = NaN;
      prevWord = '';
      range.setStart(textNode, rangeEnd - 1);
    }
    else {
      prevWord = range.toString();
      prevHeight = box.height;
      rangeEnd++;
    }
  }
  if (prevWord !== '') { 
    words.push(prevWord); 
  };
  return words;
}

console.log(
  getWordsByLines(document.getElementById('a').childNodes[0])
);
console.log(
  getWordsByLines(document.getElementById('b').childNodes[0])
);
console.log(
  getWordsByLines(document.getElementById('c').childNodes[0])
);
<div id="a" style="width:30px;word-break:break-word">
some
</div>
<div id="b" style="width:10px;word-break:break-word">
words
</div>
<div id="c" style="width:50px;word-break:break-word">
wordswo大佬123words
</div>

您可以删除也可以不删除开头和结尾的 EOL 字符;我把它们留给了更通用的解决方案。 )

关于javascript - 如何将 css 工作中断规则中的句子转换为\n 字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51649082/

相关文章:

javascript - 获取返回随机值的函数的当前值

javascript - 在嵌套 promise 之后使用 tick() 不会导致等待 promise 完成(Karma/Jasmine)

javascript - 定时器循环永远不会运行

javascript - HTML 控件同时同步(相同或不同的浏览器)

javascript - ShareThis 在新窗口中打开 facebook 分享

javascript - ajax - 刷新 div 的 javascript 函数

javascript - 从 foreach 循环内部的 textarea 获取值

javascript - 页面滚动时更改标题

css - 将涉及多个元素的条目添加到 CKEDITOR.stylesSet

css - 将 alpha channel 添加到给定颜色