我想知道是否有办法计算div中的行数.假设我们有这样的div:
<div id="content">hello how are you?</div>
Run Code Online (Sandbox Code Playgroud)
根据许多因素,div可以有一行,两行,甚至四行文本.脚本有什么方法可以知道吗?
换句话说,DOM中是否有自动中断?
如何在特定文本行上选择和应用样式?像CSS伪元素:第一行,但我想选择任何行,不限于第一行.
似乎只能通过使用CSS来完成...无论如何我不介意JS解决方案.
更新:
嗯,实际上它只是为了兴趣.我正在努力实现像突出显示段落的每一行(为了可读性,就像每个人对表行所做的那样)......
预格式文本如:
<p>
<span class='line1'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </span>
<span class='line2'>eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </span>
<span class='line3'>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </span>
<span class='line4'>ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </span>
<span class='line5'>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur </span>
<span class='line6'>sint occaecat cupidatat non proident, sunt in culpa …Run Code Online (Sandbox Code Playgroud) 当我点击鼠标时,我试图从该位置的内容可编辑div中提取单个单词.例如:
Lorem ipsum dolor sit amet, cons|ectetur adipiscing elit. Cras vestibulum gravida
tincidunt. Proin justo dolor, iaculis vulputate eleifend et, facilisis eu erat.*
Run Code Online (Sandbox Code Playgroud)
使用| 代表插入符号,函数应返回" consectetur ".
我的尝试:
window.onload = function () {
document.getElementById("text-editor").onclick = function () {
var caretPos = 0, containerEl = null, sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == this) {
caretPos = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange(); …Run Code Online (Sandbox Code Playgroud)