时间戳

首页 > 解决方案 > 如何将css工作中断规则中的句子转换为\ n字符串？

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

问题描述

<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'

如果全是英文，那似乎很简单。但是对于中文，结果变得难以理解。

标签： javascripthtmlcss

解决方案

一种可能的方法涉及“滚动范围”。你通过 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 字符；我离开它们是为了让解决方案更通用。)

推荐阅读