div布局文本溢出问题解决

最新推荐文章于 2025-07-12 15:25:15 发布

原创最新推荐文章于 2025-07-12 15:25:15 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前端专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用CSS属性如word-wrap,word-break,overflow和white-space解决HTMLdiv中纯中文、英文、数字的换行和溢出问题，以及多行文本的省略和行数限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div布局文本溢出问题解决

中文、英文、数字超出div外怎么解决
1、纯中文：自动换行，一个汉字看做一个单词；

2、纯英文或纯数字：看作一个单词，不换行；

3、遇到英文空格或者换行符：会换行；

4、遇到英文单词和英文空格：在空格处换行且不会断单词；

css代码
// 纯单词超过长度会截断换行，其他的单词不会
word-wrap: break-word;
// 单词也要换行，都要换行
word-break: break-all;

// 注意：浏览器默认属性值，以单词为单位；
word-break: normal;
word-wrap:normal;

1、单行

// 溢出隐藏
overflow: hidden;
// 强制在一行显示
white-space: nowrap;
// 显示省略号
text-overflow: ellipsis;

2、多行

// 溢出隐藏
overflow: hidden;

// 显示省略号
text-overflow: ellipsis;

// 和-webkit-line-clamp结合使用
// 将对象作为弹性伸缩盒子模型显示
display: -webkit-box;

// 用来限制在一个块元素显示的文本的行数，
// 它需要组合其他的 WebKit 属性
// 写什么数字表示最多显示几行。
-webkit-line-clamp: 3; 

// 和-webkit-line-clamp结合使用
// 设置伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;