如何强制CSS显示在空格后面的空元素上

Question

我有一个空元素出现在孩子列表的末尾。元素的目的是显示我已分配的CSS边框：

.test {
    border-left:solid 1px Black;
}

然后HTML看起来像这样：

<p>This is a test.<span class='test'></span></p>

通常这显示正常，但如果前一个元素是以空格结尾的文本，则不再呈现该元素：

<p>This is a test. <span class='test'></span></p>

我创建了一个Fiddle来证明这一点。我希望两条线在末尾都有一个垂直条（来自CSS），但只有第二条线。

这里发生了什么？如何让这两行显示CSS边框？

Answer 1

<p>This is a test. <span class='test'>&nbsp;</span></p>

甚至更好：

.test:after {
    content: "\00a0";
}

演示：http://jsfiddle.net/4AG6r/13/

所有跨度需求都是一些内容，以避免浏览器特定的渲染问题。

Answer 2

问题在于，默认情况下，span的宽度仅为1px。这可能会导致渲染问题。添加 可以解决您的问题：

<p>This is a test 1.<span class='test'>&nbsp;</span></p>
<p>This is a test 2.<span class='test'>&nbsp;</span></p>

或者你可以在span添加一个边距，因为内联元素不能有固定的宽度（感谢迈克尔）：

.test {
    border-left:solid 1px Black;
    margin: 0 2px;
}

Answer 3

尝试将您的文字信息放在<span> ... </span>内并更改您的css边框。

http://jsfiddle.net/L2Fbg/

.test {
    border-right:solid 1px Black;
}

<p><span class='test'>This is a test.</span></p>
<p><span class='test'>This is a test. </span></p>

Answer 4

您可以将p元素的宽度设置为仅足以容纳其中的内容（例如，100px），然后在测试类中使用border-right。所以，

p {
  width: 100px;
}

.test {
  border-right: solid 1px Black;
}