内联元素的行尾的CSS边框

Question

带边框的内联HTML元素的默认行为是,在换行符的末尾和行的开头,没有绘制边框.喜欢

span {
  border: 1px solid black;
}

见结果:http://jsfiddle.net/yuszuv/ft7waga3/1/

有没有办法绘制"缺失"边框,以便每一行似乎都包含在一个框中？

Answer 1

我担心你不能border在display:inline元素上使用包含在矩形中的每一行.
但是,有效的解决方法是使用box-shadow替代方法.

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

的jsfiddle

下面是FireFox的截图:

正如jan所说,更好的方法是使用盒子装饰 - 休息

根据canIuse,这应该适用于所有最新的浏览器,IE除外:

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

更新了jsFiddle