Question

<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框中，有一些样式称为width。

这些单词由CSS分词规则环绕。

有什么方法可以将它们转换为\ n拆分的字符串，还是我们可以知道哪一行的字符呢？

在演示中，“ some”应为“ so \ nme”，“ word”应为“ w \ no \ nr \ nd \ ns”，“ wordswowords”应为“ words \ nwo大\ n”佬\ n123wo \ nrds'

如果全部都是英语，那似乎很简单。但是使用中文，结果变得难以理解。

Answer 1

一种可能的方法涉及“滚动范围”。您通过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字符；我离开他们，是为了使解决方案更具通用性。）

Answer 2

html：

<div class="oneWordOneLine">
  some words
</div>

css：

.oneWordOneLine {
  word-spacing: 999999px;
}

或者您也可以使用word-spacing: 100vw;

如果您有一个宽度固定的元素，则可以将其本身的确切宽度作为单词间距的值：

.oneWordOneLine {
   width: 100px;
   word-spacing: 100px;
 }

Answer 3

我想出了问题的要点，所以这里是fix from another post asking exactly the same thing

And here is that same question from 7 years ago

旧答案

添加ID

<div id="myDiv" style="width:10px">
  some words
</div>

然后使用javascript

let myTxt = document.getElementById("myDiv").innerHTML;

现在，您可以使用正则表达式或其他字符串方法来更改myTxt，但是您想将其放回去，只需：

document.getElementById("myDiv").innerHTML = myTxt;

一些可以帮助您的想法：

使用正则表达式创建新行/\n/
使用正则表达式或indexOf()查找内容。
根据换行符.split("\n")创建数组，或比较.indexOf("\n")

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

3 个答案:

旧答案