之前的俺遇到过一个需求那就是在flex布局中实现换行,当时俺的处理方式是添加一个元素,然后让这个元素的height:0,width:100%,即解决了换行的问题。
今天晚上俺决定写一篇文章总结一下如何用CSS实现换行,希望帮助到有需要的同学。
本文使用的都是CSS2的属性。
使用转义码实现
第一个方法是使用转义序列码实现,但是需要设置一个white-space属性,该属性设置了元素空白浏览器如何处理。
以下面代码为例,我们设置第二个P元素前面有一个换行的效果,\a表示一行的结尾。(大概意思应该是这个吧,俺英文不是很好。)
注:white-space:pre;为必须设置的属性。
该方法会在前面有一个空白的一行。
<style> *{ margin: 0; padding:0; } p{ white-space: pre; } p:nth-child(2)::before{ content: '\a' } </style> <p>HelloWorld</p> <p>Hi</p> <p>Hey</p>
使用伪类块元素实现
第二个处理方法是使用为元素实现,这个办法就比之前的简单很多了。这个方法不会创造一行空白的效果,会直接换行。
代码如下,我们将一个伪元素设置为块元素,即解决了换行的问题。
span:nth-child(2)::before{ content: ''; display: block; } <span>HelloWorld</span> <span>Hi</span> <span>Hey</span>