是否可以动态获取固定宽度的文本的最后一行？
这是一个例子 ：
Contrary to popular belief Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. 这个div的宽度是200px，我需要抓住我在浏览器中看到的最后一行，用一个跨度包装它。 比如it over 2000 years old.在我的情况下。
这可能与jquery / javascript？ 或者至少得到这个“最后”行的长度。
编辑：我想我找到了一个好方法： https ： //jsfiddle.net/qqkxyq42/2/
这很有效。 逐字逐句计算宽度
https://jsfiddle.net/stevenkaspar/ht7ostyx/9/
Contrary to popular belief Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
这可能比你希望的更硬，但你可以检查父级的高度，并开始逐字删除，每次迭代检查，直到高度变化。 然后你就会知道最后一行开始的单词或符号。
var words = text.split(' '); // An array of all the words split by spaces, since that's where text breaks by default. var lastLine = []; // Put all words that don't change the height here. var currentHeight = parentEl.clientHeight; // The starting height. while(words[0]){ parentEl.innerText = words.join(' '); if (parentEl.clientHeight < currentHeight) { var span = document.createElement('span'); span.innerText = lastLine.join(' '); parentEl.appendChild(span); break; } lastLine.shift(words.pop); }
我假设你这样做是为了以某种方式设置文本样式，目前有一个名为first-line的伪选择器，它针对选择器上的第一行文本，但是我们还没有看到last-line一行 - last-line或nth-line(#)选择器，这是一个耻辱，因为它似乎是一个非常合理的事情。
如果您知道或可以近似容器中文本的行高，则可以使用document.caretPositionFromPoint 。 这是一个示例小提琴： https ： //jsfiddle.net/xtcadpo0/
该函数基本上允许我们为给定坐标处的任何元素获取文本的偏移位置，然后我们对textContent属性使用简单的字符串切片。 我们使用它来获取我们需要的文本之前的点的位置，并获得偏移量。
此解决方案对DOM性能也非常友好，因为我们不插入新元素或改变已存在的元素。
希望有所帮助。
编辑：刚看到你想要在一个范围中包装最后一行，你可以这样做： https ： //jsfiddle.net/xtcadpo0/1/
它拆分文本节点并用包装元素替换替换。
这是代码：
function fn(el) { var range; var textNode; var offset; var e = {}; var height = el.clientHeight; var lh = parseFloat(getComputedStyle(el).lineHeight, 10) || 18; var D = height / lh; var secondLastLineStart = (D - 1.5) * lh; var pos = el.getBoundingClientRect(); ex = pos.right; ey = secondLastLineStart; if (document.caretPositionFromPoint) { range = document.caretPositionFromPoint(ex, ey); textNode = range.offsetNode; offset = range.offset; } else if (document.caretRangeFromPoint) { range = document.caretRangeFromPoint(ex, ey); textNode = range.startContainer; offset = range.startOffset; } var repl = textNode.splitText(offset); var newEl = document.createElement('span'); textNode.parentNode.replaceChild(newEl, repl); newEl.appendChild(repl); } fn(document.getElementById('x'));
为此，您必须使用javascript split方法获取文本中的所有作品。 然后将每个单词添加到元素并获取元素height 。 如果元素高度达到元素的第一个高度，则表示该单词位于最后一行。 看看我的例子
var words = $(".parent").text().split(" "); var elementHeight = $(".parent").height(); var lastLine = ""; $(".parent").text(""); $.each(words, function(index, value){ $(".parent").append(value + " "); if ($(".parent").height() == elementHeight) lastLine += value + " "; }); var html = $(".parent").html().replace(lastLine.trim(), "" + lastLine + ""); $(".parent").html(html);
.parent { width: 200px; } span { background: yellow; }
Contrary to popular belief Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.