内联元素的行尾的CSS边框

Question

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

span {
  border: 1px solid black;
}

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

有没有办法画出＆＃34;缺失＆＃34;边框，以便每一行似乎都包含在一个框中？

Answer 1

我担心您无法在border元素上使用display:inline将每行包含在矩形中。
但是，有效的解决方法是使用box-shadow代替。

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

<强> jsfiddle

FireFox截图下方：

---

正如jan所说，更好的方法是使用box-decoration-break

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

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

<强> updated jsFiddle