使用javascript查找渲染的換行符

Question

我有這種情況：

 div { width: 200px }

 <div> example example example example example</div>

填充<div>的整個寬度時，文本會自動跳轉到下一行。

使用 javascript 如何在上面的行中獲得渲染的內容？

注意：字符串中沒有換行符

以上片段的預期結果：

"example example example"對應第 1 行， "example example"對應第 2 行

Answer 1

您可以使用Range API及其方便的getBoundingClientRect()方法來確定 TextNode 中哪個字符標記了癲癇發作。

請注意，每次調整窗口大小/更改布局時，這顯然都需要重新計算。

 function getLineBreaks(node) { // we only deal with TextNodes if(!node || !node.parentNode || node.nodeType !== 3) return []; // our Range object form which we'll get the characters positions const range = document.createRange(); // here we'll store all our lines const lines = []; // begin at the first char range.setStart(node, 0); // initial position let prevBottom = range.getBoundingClientRect().bottom; let str = node.textContent; let current = 1; // we already got index 0 let lastFound = 0; let bottom = 0; // iterate over all characters while(current <= str.length) { // move our cursor range.setStart(node, current); if(current < str.length -1) range.setEnd(node, current+1); bottom = range.getBoundingClientRect().bottom; if(bottom > prevBottom) { // line break lines.push( str.substr(lastFound , current - lastFound) // text content ); prevBottom = bottom; lastFound = current; } current++; } // push the last line lines.push(str.substr(lastFound)); return lines; } console.log(getLineBreaks(document.querySelector('.test').childNodes[0]));

 div.test { width: 50px; margin-bottom: 100px; word-break: break-all; } body>.as-console-wrapper{max-height:100px}

 <div class="test">This is some quite long content that will wrap in multiple lines</div>

如果您需要每行的相對 y 位置：

 function getLineBreaks(node) { // we only deal with TextNodes if(!node || !node.parentNode || node.nodeType !== 3) return []; // our Range object form which we'll get the characters positions const range = document.createRange(); // here we'll store all our lines const lines = []; // begin at the first character range.setStart(node, 0); // get the position of the parent node so we can have relative positions later let contTop = node.parentNode.getBoundingClientRect().top; // initial position let prevBottom = range.getBoundingClientRect().bottom; let str = node.textContent; let current = 1; // we already got index 0 let lastFound = 0; let bottom = 0; // iterate over all characters while(current <= str.length) { // move our cursor range.setStart(node, current); if(current < str.length - 1) range.setEnd(node, current+1); // wrap it (for Chrome...) bottom = range.getBoundingClientRect().bottom; if(bottom > prevBottom) { // line break lines.push({ y: prevBottom - (contTop || 0), // relative bottom text: str.substr(lastFound , current - lastFound) // text content }); prevBottom = bottom; lastFound = current; } current++; } // push the last line lines.push({ y: bottom - (contTop || 0), text: str.substr(lastFound) }); return lines; } console.log(getLineBreaks(document.querySelector('.test').childNodes[0]));

 div.test { width: 50px; margin-bottom: 100px; } body>.as-console-wrapper{max-height:100px}

 <div class="test">This is some quite long content that will wrap in multiple lines</div>

對於那些需要它來處理元素而不是單個 textNode 的人，這里有一個快速制作的小提琴，它可能會失敗，但在大多數情況下應該可以工作。

Answer 2

試試 CSS

div {
  width:200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 3

這可以使用 CSS 來完成。 不需要Javascript。

<div> example example example example example</div>
<style>
div{
    width: 200px;
    word-wrap: break-word;
}
</style>