问题描述
我有这种情况:
div { width: 200px }
<div> example example example example example</div>
当填充<div>
的整个宽度时,文本会自动跳至下一行.
Text jumps to next line automatically when filling the full width of the <div>
.
使用javascript,如何在上一行中显示渲染的内容?
Using javascript how can I have the rendered content in the above line?
注释:字符串中没有换行符
以上代码段的预期结果:
"example example example"
与第1行相对应,"example example"
与第2行相对应
"example example example"
corresponding with row 1 and "example example"
corresponding with row 2
推荐答案
您可以使用范围API 及其方便的 getBoundingClientRect()
方法来确定哪个字符标记了TextNode中的癫痫发作.
You can make use of the Range API and its handy getBoundingClientRect()
method to determine which character marks the seizure in a TextNode.
请注意,每次更改窗口大小/更改布局时,显然都需要重新计算.
Note that this obviously needs to be recalculated every time the window is resized / something changes the layout.
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位置:
And if you need the relative y position of each lines:
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的人来说,这是一个快速制作小提琴可能会失败,但在大多数情况下应该可以使用.
For the ones who need it to work over elements instead of a single textNode, here is a quickly made fiddle which may fail but which should work in most cases.
这篇关于使用JavaScript查找渲染的换行符的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!