Question

是否可以在文本节点内联后立即设置和设置换行符？

例如：

br {
    position:relative;
    display: block;
    border: 1px dotted green;
    font-size: 8px;
    line-height: 8px;
    height: 8px;
    background: yellow;  
    color: blue;
    content: "A";
    width: 5px;
}

<pre><div contenteditable="true">
some<BR />text with<BR />linebreaks.<BR />The intended result<BR />is to style the linbreak<BR />right after the sentence.<BR />
   </div>
 </pre>

此代码段的结果几乎可以实现我正在寻找的内容，但它会将换行符的直观表示定位在下一行。

预期结果是：

some"linebreak visual representation"
text with"linebreak visual representation"
linebreaks"linebreak visual representation"
The intended result"linebreak visual representation"
is to style the linebreak.."linebreak visual representation"

编辑：fiddle

Answer 1

适用于Chrome（未经测试的其他浏览器）......

br {
  display: inline;
  border: 1px dotted green;
  font-size: 8px;
  line-height: 8px;
  height: 8px;
  background: yellow;
  color: blue;
  content: "A";
  width: 15px;
}
br:after {
  content: " Hello! \a";
  white-space: pre;
}

<div contenteditable="true">some<BR />text with<BR />linebreaks.<BR />The intended result<BR />is to style the linbreak<BR />right after the sentence.<BR />
  </div>

但是我强烈建议您read this Török's answer，似乎无法为所有浏览器自定义br标记。原因是这个元素没有内容，它*生成一个换行符，它只是一个换行符*。 只有少数样式适用于它，例如clear或position。您可以设置BR的边框，但由于没有视觉尺寸，您将看不到它。。

您最好使用hr标签来实现您的需求。

Answer 2

嘿br应该显示：inline-block;

br {
    position:relative;
    display: inline-block;
    border: 1px dotted green;
    font-size: 8px;
    line-height: 8px;
    height: 8px;
    background: yellow;  
    color: blue;
    content: "A";
    width: 5px;
}

<pre><div contenteditable="true">
some<BR />text with<BR />linebreaks.<BR />The intended result<BR />is to style the linbreak<BR />right after the sentence.<BR />
   </div>
 </pre>

Answer 3

当然，您可以通过向您的CSS添加display:inline-block属性来实现这一目标。但是，如果只希望某些<br>标记具有此功能，则可以添加一个类并将该内联块属性分配给该类。这样你就可以组合两个<br>标签，一个带有类，一个没有得到一个新的行和可见的换行符。

样式化换行符（<br/>）与文本内联

3 个答案: