html 元素换行_每天一个CSS小技巧 - 插入换行

当我们在定义列表时，我们通常想得到如下的效果：

下面是我们的html代码：

Name: Lea Verou Email: lea@verou.me Location: Earth

实际得到的效果是

当我们想得到最上面的效果时，第一步通常是：

因为

和是 块级元素，所以所有的名和值都各占一行，我们可能通过改变或的display属性来做尝试：

    dd, dt{      display: inline;    }

---

解决方案

如上，我们缺少几个换行

实际上有一个Unicode字符专门代表换行符：0x000A。在CSS中，我们可以用"A"表示，我们可以把它作为::after伪元素的内容，添加到dd的尾部，但是你会发现并没有什么作用，但这并不代表我们错了，而是在HTML代码中，默认情况下换行符会与相邻的其他空白符进行合并，我们这里保留源代码中的这些空白符和换行，因此我们这么做：

    dd, dt{      display: inline;    }    dd::after{      content: "A";      white-space: pre;    }    dd{      margin: 0;      font-weight: bold;    }

很明显，我们已经得到了我们想要的效果，不过如果我们尝试如下时：

由于我们在每个dd后面都加了一个换行符，每个值都会分到单独一行，甚至不需要换行的时候也是如此。因此我们需要采取类似if else的判断：

    dd + dt::before{      content: "A";      white-space: pre;    }    dd + dd::before{      content: ', ';      font-weight: normal;      margin-left: -.25em;    }

另外上述的margin是为了修正逗号前的空格，尺寸是需要根据字体个尺寸调试的。