CSS3中提供了一种非常实用的技术:文字断行。当文本超过给定容器的宽度时,我们可以用文字断行来告诉浏览器如何处理这些超出范围的文本内容。下面我们就来具体了解一下。
/* 基本语法 */ text-overflow: [clip|ellipsis|string]; white-space: [normal|nowrap|pre|pre-wrap|pre-line]; word-wrap: [normal|break-word]; /* 各属性解释 */ text-overflow: 定义文本溢出如何被截取、省略或者显示; white-space: 定义如何处理容器中的空白符; word-wrap: 定义当一个单词太长而不能插入换行符时如何处理;
其中,text-overflow
属性用于控制溢出文本的处理方式,取值可以是clip
(裁剪文本)。ellipsis
(隐藏超出文本,并显示省略号)。string
(隐藏超出文本,并显示给定的字符串)。
white-space
属性用于定义如何处理容器中的空白符,可以取值normal
(合并连续的空白符,不允许文本换行)。nowrap
(合并连续的空白符,不允许文本换行,容器会水平滚动)。pre
(保留连续空白符,允许文本换行)。pre-wrap
(保留连续空白符,允许文本换行,容器根据文本宽度自动适应)。pre-line
(合并连续的空白符,允许文本换行,容器根据文本宽度自动适应)。
最后,word-wrap
属性定义当一个单词太长而不能插入换行符时如何处理,取值可以是normal
(保持单词完整,即使溢出文本边界)。break-word
(如果一个单词太长而不能插入换行符,则此单词断为多行)。
以上就是CSS3文字断行的相关知识,我们可以根据实际情况选择不同的属性值来处理文本溢出问题,让页面展现更美观、规范。