在项目中发现但文字过长时不希望其换行显示,并且多余的文字显示省略号实现的方式是:
overflow: hidden;
white-space: nowrap; /*防止文字太长时候自动折行*/
text-overflow: ellipsis; /*ie下 可以自定出省略号*/使用时需要这只他的高度和宽度
注意:IE11和IE8存在兼容性问题再IE11中如果样式没有起作用可以将其的宽度去掉
并且如果是表格形式的需要设置表格的样式table-layout: fixed;
本文介绍如何在项目中处理长文本避免自动换行,通过应用CSS属性如overflow, white-space和text-overflow来实现文本的水平不换行及显示省略号,同时针对不同浏览器的兼容性问题提供解决方案。
在项目中发现但文字过长时不希望其换行显示,并且多余的文字显示省略号实现的方式是:
overflow: hidden;
white-space: nowrap; /*防止文字太长时候自动折行*/
text-overflow: ellipsis; /*ie下 可以自定出省略号*/使用时需要这只他的高度和宽度
注意:IE11和IE8存在兼容性问题再IE11中如果样式没有起作用可以将其的宽度去掉
并且如果是表格形式的需要设置表格的样式table-layout: fixed;
1098

被折叠的 条评论
为什么被折叠?