CSS技巧:利用CSS实现换行的两种方法

之前的俺遇到过一个需求那就是在flex布局中实现换行,当时俺的处理方式是添加一个元素,然后让这个元素的height:0,width:100%,即解决了换行的问题。

今天晚上俺决定写一篇文章总结一下如何用CSS实现换行,希望帮助到有需要的同学。

本文使用的都是CSS2的属性。

使用转义码实现

第一个方法是使用转义序列码实现,但是需要设置一个white-space属性,该属性设置了元素空白浏览器如何处理。

以下面代码为例,我们设置第二个P元素前面有一个换行的效果,\a表示一行的结尾。(大概意思应该是这个吧,俺英文不是很好。)

:white-space:pre;为必须设置的属性。

该方法会在前面有一个空白的一行

CSS技巧:利用CSS实现换行的两种方法

  <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>

使用伪类块元素实现

第二个处理方法是使用为元素实现,这个办法就比之前的简单很多了。这个方法不会创造一行空白的效果,会直接换行。

代码如下,我们将一个伪元素设置为块元素,即解决了换行的问题。

CSS技巧:利用CSS实现换行的两种方法

   span:nth-child(2)::before{
        content: '';
        display: block;
   }
  <span>HelloWorld</span>
  <span>Hi</span>
  <span>Hey</span>
(0)
上一篇 2019年3月31日 下午2:02
下一篇 2019年4月5日 下午2:31

相关推荐

发表评论

登录后才能评论