CSS 换行

CSS 换行

什么是换行

换行是指元素在文档流中换到下一行显示的行为。在网页设计中，我们经常需要控制文本或元素如何换行，以达到更好的页面布局效果。

如何实现换行

在 CSS 中，有多种方法可以实现换行，下面我们将分别介绍这些方法。

1. 使用 <br> 标签

最简单的实现换行的方法就是使用 HTML 中的 <br> 标签，在需要换行的地方插入这个标签即可。

<p>第一行文字<br>第二行文字</p>

运行结果

第一行文字
第二行文字

2. 使用 CSS 属性 white-space

white-space 属性可以用来控制如何处理元素中的空白字符，其中的 pre 值可以保留换行符和空格。

.white-space {
  white-space: pre;
}

<p class="white-space">第一行文字
第二行文字</p>

运行结果

第一行文字
第二行文字

3. 使用 CSS 属性 word-wrap

word-wrap 属性指定是否允许浏览器在单词内部换行。

.word-wrap {
  word-wrap: break-word;
}

<p class="word-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum sem ipsum, eu tempor purus dignissim vel. Mauris quis augue at enim sagittis congue.</p>

运行结果

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum sem ipsum, eu tempor purus dignissim vel. Mauris quis augue at enim sagittis congue.

总结

在网页设计中，使用合适的换行方式能够帮助我们更好地控制页面布局，提升用户体验。通过 <br> 标签、white-space 和 word-wrap 属性，我们可以灵活地实现文本换行的效果。