CSS 文本换行属性探索：word.docxVIP

第

CSS文本换行属性探索：word

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

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

word-wrap属性

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

normal：默认值。当文本超出容器宽度时，会在单词之间进行换行，如果一个单词太长无法完全显示在一行内，它会溢出到下一行。

示例代码：

style

.contAIner{

width:200px;

border:1pxsolid#ccc;

padding:10px;

.normal-text{

word-wrap:normal;

/style

div

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

break-word：当文本超出容器宽度时，会在单词内部进行换行，即使单词中间的换行符不存在。

示例代码：

style

.conta