1. 犀牛前端部落首页
  2. CSS百科

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>

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/774.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注