Html 内联元素行尾的CSS边框

带边框的内联HTML元素的默认行为是，在换行符处的行尾和行首没有绘制边框。像

span {
  border: 1px solid black;
}

结果见：

---

有没有办法画出“缺少的”边框，使每一行看起来都包含在一个框中？

恐怕您不能在

显示：内联
元素上使用
边框将每一行包含在一个矩形中。

但是，一个有效的解决方法是使用
框阴影

span {
    line-height: 32px;
    box-shadow: 0 0 0 1px black;
}


下面是FireFox的屏幕截图：



正如简所说，更好的方法是使用

根据，这适用于所有最新浏览器，IE除外：

span {
  border: 1px solid black;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

注意不错，但也许你可以让它成为单词break:break所有新的CSS属性
框装饰break:clone
为Firefox解决了这个问题。@jan谢谢，我不知道这个新属性。我已经用适用于所有浏览器的解决方案更新了我的答案，除了IE.@chipChocolate.py在OSX中运行的FF 27.0.1上工作。可能您需要添加前缀
-moz-
，因此使用
-moz-box阴影：0 0 1px黑色；长方体阴影：0 1px黑色@chipChocolate.py是的，我知道。我猜也许你有一个很老的朋友。所以，请定义你所说的“适当”是什么意思。在Firefox v34.0.@chipChocolate.py上，OP询问
是否有办法绘制“缺失”的边框，使每一行看起来都包含在一个框中？
。这不是我刚刚附上的截图所做的吗？也许我误解了？@chipChocolate.py是的，如果我缩小我的页面，我可以复制你的图像。尝试重置缩放（视图>缩放>重置）