Web前端入门第 50 问：CSS 内容溢出怎么处理？

溢出：盒模型装不下内容的时候，超出盒子大小的内容就称之为内容溢出，这里的内容又分为盒模型和文本，所以 CSS 在处理溢出时候也分为文本和盒模型两种情况。
正常情况内容溢出应该换行自动撑开盒子大小，但某些情况下我们盒子大小可能是固定的，不允许自动撑开盒子大小，这种情况就需要处理溢出情况。
盒子溢出

盒子溢出一般就三种方式：
1、溢出内容直接隐藏。
2、溢出显示滚动条。
3、默认情况，溢出内容显示。
在处理盒子溢出时，必须要祭出 overflow 属性。
overflow 属性值

1、visible：默认值，内容超出盒子大小，会显示在盒子外面。
2、hidden：内容超出盒子大小，会直接消失不见。
3、scroll：不管内容是否超出盒子大小，都显示滚动条（注意看下图中3的横向滚动条）。
4、auto：内容超出盒子大小时才显示滚动条，内容没超出盒子大小时，不显示滚动条。
5、clip：类似于 hidden，但元素不再支持通过 JS 设置 scrollLeft 等属性的值或 scrollTo() 方法滚动到指定位置。
overflow 还可拆分成 overflow-x 和 overflow-y，分别控制水平方向和垂直方向的滚动条，其值于与 overflow 一致。
示例：

1.   <p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p>
2.   <p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p>
3.   <p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p>
4.   <p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p>
5.   <p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p><p>一行文本</p>

复制代码

效果：

文本溢出

看一张图，正常情况如果盒子足够大，那么文本换行之后还是会在盒子里面。但如果盒子高度不够，内容就跑到盒子外面去了。或者是内容中有超长的英文字符、连续不断的数字，浏览器也不会自动换行。

文本溢出几种处理方式

1、溢出内容直接隐藏。
2、文本溢出显示省略号，鼠标放上文字时候显示全部内容。
3、借助 JS 能力，让内容滚动显示（CSS 也能做到，不过内容衔接不够丝滑）。
4、长英文/数字换行显示。
溢出隐藏：
祭出 overflow 属性，分分钟让溢出的内容变成消失的它~~
省略号显示：
溢出省略号又分为两种：单行省略号所有浏览器都支持，多行省略号仅 webkit 内核浏览器支持（如果是做移动端开发，那么放心使用吧）。
鼠标放上显示全部内容需使用 HTML 的 title 属性值。

1. /* 单行 */
2. .ell {
3.   overflow: hidden;
4.   text-overflow: ellipsis;
5.   white-space: nowrap;
6. }
7. /* 多行 */
8. .ell-multi {
9.   overflow: hidden;
10.   display: -webkit-box;
11.   text-overflow: ellipsis;
12.   box-orient: vertical;
13.   -webkit-box-orient: vertical;
14.   -moz-box-orient: vertical;
15.   -o-box-orient: vertical;
16.   -ms-box-orient: vertical;
17.   line-clamp: 2; /* 超出2行显示省略号 */
18.   -webkit-line-clamp: 2; /* 超出2行显示省略号 */
19. }

复制代码

超长英文换行：

1. .en {
2.   /* 英文字符超长自动换行 */
3.   word-break: break-all;
4.   word-wrap: break-word;
5. }

复制代码

示例：

1.   溢出：盒模型装不下内容的时候，超出盒子大小的内容就称之为内容溢出，这里的内容又分为盒模型和文本，所以 CSS 在处理溢出时候也分为文本和盒模型两种情况。
2.   溢出：盒模型装不下内容的时候，超出盒子大小的内容就称之为内容溢出，这里的内容又分为盒模型和文本，所以 CSS 在处理溢出时候也分为文本和盒模型两种情况。
3.   溢出：盒模型装不下内容的时候，超出盒子大小的内容就称之为内容溢出，这里的内容又分为盒模型和文本，所以 CSS 在处理溢出时候也分为文本和盒模型两种情况。
4.   溢出：盒模型装不下内容的时候，超出盒子大小的内容就称之为内容溢出，这里的内容又分为盒模型和文本，所以 CSS 在处理溢出时候也分为文本和盒模型两种情况。
5.   
6.     http://gips2.baidu.com/it/u=3944689179,983354166&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024<br>
7.     158688888888888888888888888888888888888885555555555555
8.   

复制代码

效果：

其他相关属性

overflow-anchor

如果内容有新增删除时候，浏览器是记录滚动条位置还是记录内容位置。
auto: 会记录内容位置，让内容在滚动容器中不变。
none: 会记录滚动条位置，让滚动条位置在滚动容器中不变。
overflow-wrap

是 word-wrap 的别名，作用和 word-wrap 一样，都用于超长英文和 URL 换行。
normal: 行只能在正常的单词断点（例如两个单词之间的空格）处换行。
anywhere 和 break-word: 行可以在任何地方换行。区别在于 anywhere 在计算最小内容内在大小时，会考虑由单词换行引入的软换行机会。
hyphens

告知浏览器在换行时如何使用连字符连接单词。
none: 即便单词内有建议换行点也不会在那里换行。只会在空白符处换行。
manual: 只有当单词内存在建议换行点时，才会在该位置断开单词并使用连字符换行。
auto: 浏览器会根据当前语言环境选择合适的连字符。
scrollbar-*

用于控制滚动条相关样式，比如滑块颜色，滚动条大小等。
scroll-*

可使用 CSS 实现幻灯片翻页效果，使用较少，还是没有 JS 实现幻灯片那种丝滑感觉~~
常用属性 scroll-behavior 用于控制页面滚动时候是否有动画效果：smooth 使用动画平滑滚动，auto 无动画滚动。
写在最后

前端在做页面开发的时候，必须要考虑各种内容超长的情况，多思考一下内容极限情况，就会少很多 bug ！！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！