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 框样式宽度中有一些单词。

这些单词由 css 分词规则包装。

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

在demo中,'some'应该是'so\nme','word'应该是'w\no\nr\nd\ns','wordswowords'应该是'words\nwo大\n佬\n 123w\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 - 图表未从Jquery接收到的值更新

javascript - Bourbon Refills Navigation JavaScript 错误 : Uncaught TypeError: undefined is not a function

html - 关键帧在LESSat中的LESS mixin中不起作用

javascript - 为什么这个从 VB.NET 移植的 JavaScript 没有执行?

css - 按下Enter键时,在div中中断文本

线程

javascript - IE中的CSS翻转动画:反面显示镜像内容

用于多项选择测验的 Javascript

html - 引导 iframe 未调整大小