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