html - 内联元素行尾的 CSS 边框

Question

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

span {
  border: 1px solid black;
}

查看结果:http://jsfiddle.net/yuszuv/ft7waga3/1/

有没有办法画出“缺失”的边框，让每一行看起来都包含在一个盒子里？

Answer 1

恐怕您不能在 display:inline 元素上使用 border 使每一行都包含在一个矩形中。
但是，一种可行的解决方法是改用 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