CSS 文本换行属性探索：word-wrap 和 hyphens

百变鹏仔 4周前 (09-19) #CSS

文章标签换行

在网页设计中，文本的换行处理是一个重要的问题。当文本超出容器宽度时，我们需要选择适当的换行方式，以确保内容的可读性和美观性。本文将介绍 CSS 中的两个常用属性：word-wrap 和 hyphens，并辅以具体的代码示例来说明其使用方法和效果。

word-wrap 属性

word-wrap 属性用于指定文本在换行时的处理方式。它有两个可选值：normal 和 break-word。

示例代码：

立即学习“前端免费学习笔记（深入）”；

<style>.container {  width: 200px;  border: 1px solid #ccc;  padding: 10px;}.normal-text {  word-wrap: normal;}</style><div class="container">  <p class="normal-text">这是一段很长很长很长很长很长很长的文本。</p></div>

效果：容器宽度为 200px，文本超出容器宽度时，会在单词之间进行换行。

示例代码：

立即学习“前端免费学习笔记（深入）”；

<style>.container {  width: 200px;  border: 1px solid #ccc;  padding: 10px;}.break-word {  word-wrap: break-word;}</style><div class="container">  <p class="break-word">这是一段很长很长很长很长很长很长的文本。</p></div>

效果：容器宽度为 200px，文本超出容器宽度时，会在单词内部进行换行。

hyphens 属性

hyphens 属性用于控制连字符的使用，以适应不同的语言和文本排版需求。它有三个可选值：none、manual 和 auto。

示例代码：

立即学习“前端免费学习笔记（深入）”；

<style>.container {  width: 200px;  border: 1px solid #ccc;  padding: 10px;}.no-hyphens {  hyphens: none;}</style><div class="container">  <p class="no-hyphens">这是一个没有连字符的例子。这个长长长长的单词不会被自动断行，而是直接溢出到下一行。Hyphens are not used in this example, so the long word will overflow to the next line instead of being automatically broken.</p></div>

效果：容器宽度为 200px，文本超出容器宽度时，单词直接溢出到下一行。

示例代码：

立即学习“前端免费学习笔记（深入）”；

<style>.container {  width: 200px;  border: 1px solid #ccc;  padding: 10px;}.manual-hyphens {  hyphens: manual;}</style><div class="container">  <p class="manual-hyphens">这是一个使用手动断字的例子。这个长长长长的单词被手动添加了连字符，使其在需要换行时正确断行显示。</p></div>

效果：容器宽度为 200px，文本超出容器宽度时，根据语言的断字规则，单词会正确断行显示。

示例代码：

立即学习“前端免费学习笔记（深入）”；

<style>.container {  width: 200px;  border: 1px solid #ccc;  padding: 10px;}.auto-hyphens {  hyphens: auto;}</style><div class="container">  <p class="auto-hyphens">这是一个使用自动断字的例子。这个长长长长的单词会根据语言的断字规则自动添加连字符，使其在需要换行时正确断行显示。</p></div>

效果：容器宽度为 200px，文本超出容器宽度时，根据语言的断字规则，单词会正确断行显示。

总结：

通过使用 word-wrap 和 hyphens 这两个 CSS 属性，我们可以对文本的换行进行更加精细的控制。word-wrap 属性用于指定换行的方式，可以选择在单词间换行或在单词内换行；hyphens 属性用于控制连字符的使用，可以选择不使用连字符、手动添加连字符或自动添加连字符。在实际的网页设计中，我们可以根据文本的特点和语言要求来选择合适的属性值，以达到更好的可读性和排版效果。

文章推荐

CSS 文本换行属性探索：word-wrap 和 hyphens

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写