样式化换行符 (<br>) 与文本内联

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"

编辑：A fiddle

Answer 1

嘿 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 2

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

Answer 3

这适用于 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 标签来实现你所需要的。

样式化换行符 (<br>) 与文本内联

Styling a linebreak (<br>) inline with the text

html

css

line-breaks