Html 如何强制CSS显示在空白后的空元素上

我有一个空元素出现在子元素列表的末尾。元素的用途是显示我指定的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>

这是一个测试

我已经创建了一个示例来演示这一点。我希望两行的末尾都有一个垂直条（来自CSS），但只有第二行有

这是怎么回事？如何使两行都显示CSS边框

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

演示：

---

span所需要的只是一些内容，以避免特定于浏览器的渲染问题。

尝试将文本信息放入

<代码>并更改css边框的侧面

.test{
右边框：实心1px黑色；
}
这是一个测试

这是一个测试

问题在于默认情况下，

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>

---

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

右边框

。所以

p {
  width: 100px;
}

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

---

您想做什么：这是一个测试。

？不，我不想在跨度中做任何事情，尽管这建议了一个可能的解决方法-对于上述情况，我必须将边框从左改为右，但这增加了一个特殊条件，我必须检查生成HTML的逻辑，这是我试图避免的。一个不可破坏的空间似乎能达到预期的效果，尽管我不能告诉你为什么它一开始就不起作用。我看到两个都是竖条。@x23啊哈。。。也许是浏览器的问题？我在Firefox中看到了这两个条，但在Chrome中看不到。我喜欢宽度方法，但它实际上似乎不起作用。我想我错了。像span这样的内联元素不能有固定的宽度。但他们可以有一个利润空间。我将更新我的答案看起来

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>

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

p {
  width: 100px;
}

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