在CSS中,我们可以使用wordwrap这个属性来让较长的单词或文本换行,此外还有whitespace和overflow两个属性也可以实现同样的效果。其中,wordwrap属性可以控制单词是否可以被分...
在CSS中,我们可以使用word-wrap这个属性来让较长的单词或文本换行,此外还有white-space和overflow两个属性也可以实现同样的效果。
其中,word-wrap属性可以控制单词是否可以被分隔到下一行,常用的属性值有:
- normal:默认值,不会分隔单词。
- break-word:单词会被分隔,以适应容器大小。
white-space属性决定了如何处理元素内的空格与换行,常用的属性值有:
- normal:默认值,连续的空格和换行符会被压缩为一个空格,并在必要的时候换行。
- pre:空格和换行符会被保留。
- nowrap:不允许换行。
overflow属性控制了容器中溢出内容的处理方式,常用的属性值有:
- visible:默认值,允许溢出。
- hidden:内容不可见,被裁剪。
- scroll:添加滚动条。
- auto:添加滚动条,但只有在内容溢出时才显示。
以下是一些例子来演示如何使用这些属性:
这是一段非常非常长的单词,如果不加word-wrap属性,它将会一直延伸到容器外面。
这里 有 很 多 空 格 和 换 行符,若不使用pre属性,这些空格和换行符会被压缩为一个空格。
这里是一段非常长的代码,如果不加overflow属性,那么代码将会溢出容器。