Loading... ### 单行文字溢出隐藏 ```css overflow: hidden; // 文字长度超出限定宽度，则隐藏超出的内容 white-space: nowrap; // 设置文字在一行显示，不能换行 text-overflow: ellipsis; // 规定当文本溢出时，显示省略符号来代表被修剪的文本 ``` ### 多行文字溢出隐藏 ```css display: -webkit-box; // 和4结合使用，将对象作为弹性伸缩盒子模型显示 overflow: hidden; // 文本溢出限定的宽度就隐藏内容 text-overflow: ellipsis; // 多行文本的情况下，用省略号“…”隐藏溢出范围的文本 -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性 -webkit-box-orient: vertical; // 和4结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ``` ### uniapp 或者小程序 ```css display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //行数 2表示2行超出会显示省虐号 overflow: hidden; white-space: normal; // 规定段落中的文本不进行换行 word-break: break-all; // 允许单词中换行，在容器的最右边进行断开不会浪费控件 word-wrap: break-word; // 防止长单词溢出，单词内部短句 //重点其中，当 word-break: break-word; 时，表示 如果不想单词内断行可以进行单词间的断行。 ``` 最后修改：2023 年 06 月 12 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏