Question

这是我的question的后续内容，这使我能够突出显示div内部有换行符，但这不仅限于可信的div / WYSIWYG。特别是，只是包含文章的普通HTML页面。我只是希望得到那些正常突出显示换行符的视觉反馈。

问题是：

是否可以在不使用Javascript和＆amp; nbsp时突出显示 的厚度？也许一些纯粹的CSS使 像空白一样？

这个问题的动机是给 一个厚度，如果可能的话，不要使用 EXTRA ＆amp; nbsp或javascript操作。只需给 一个不间断空格字符的行为即可。一石二鸟。

我搜索了这些引用，Can you target a breakline with css和this。

我已经实现了模拟版本：

如果selection在一个范围内，则使用实现range和 的JS，改变其模仿突出显示的空白字符的样式。 尽可能地，我不想仅仅使用JS来实现这一点。

和使用＆amp; nbsp的人在一个范围内充当 。

继续前进，

是的， 只是一个创建新行的指令，它不一定是一个字符 - 像这样的空白字符不可聚焦（运行代码片段）

var sel = window.getSelection();
var newRange = document.createRange();

var spanTwo = document.getElementById("two");
var spanOne = document.getElementById("one");
var spanTextNode = spanTwo.firstChild;

newRange.setStart(spanOne,0);
newRange.setEnd(spanTextNode,spanTextNode.textContent.length);

sel.addRange(newRange);

<html>
<body>
  <span id="one">He</span>
   <span><br></span>
   <span><br></span>
   <span id="two">He</span>
</body>
</html>

突出显示在中间突破并继续到id两个跨度。可以通过插入&nbsp来解决此问题（请运行代码段）：

 var sel = window.getSelection();
    var newRange = document.createRange();

    var spanTwo = document.getElementById("two");
    var spanOne = document.getElementById("one");
    var spanTextNode = spanTwo.firstChild;

    newRange.setStart(spanOne,0);
    newRange.setEnd(spanTextNode,spanTextNode.textContent.length);

    sel.addRange(newRange);

    <html>
    <body>
      <span id="one">He</span>
       <span><br></span>
       <span>&nbsp<br></span>
       <span id="two">He</span>
    </body>
    </html>

同样，问题的动机是给 一个厚度，如果可能的话，不要使用 EXTRA ＆amp; nbsp或javascript操作。只给断裂线一个不间断空间的行为。

更新只是把它留在这里，进一步的研究，我找到了一个例子 - 这是facebook的编辑（Draft.js）

在检查DOM时，它给了我：

<br data-text="true">

哪个是突出显示的。我不知道这是一个假的 还是由它的JS渲染引擎产生的虚假亮点。我认为在这个实例中这是一个空白字符，因为我可以专注于它。

无论如何，谢谢。

突出显示时给出厚度

0 个答案: