2024年04月10日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
文本溢出
语法：
text-overflow: clip | ellipsis;
clip不显示省略号，溢出文本被裁剪
cllipsis 显示省略号（省略号相关属性要给文本所在容器设置，不能越级设置）
注：单行文本省略号设置必须满足以下四个条件，缺一不可；
①给容器一个固定的宽度 width: 数值+单位;
②设置文本强制在一行显示 white-space: nowrap;
③容器溢出隐藏 overflow: hidden;
④文本溢出显示省略号 text-overflow: ellipsis;
eg:
div{
width: 数值+单位;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}white-space介绍：
语法：
white-space: normal | nowrap | pre | pre-wrap | pre-line;
normal: 默认值，常规显示;
nowrap: 强制在一行显示;
pre: 保留空白符，强制在一行显示;
pre-wrap: 保留空白符，换行;
pre-line: 合并空白符，保留换行符;
本文链接：http://so.lmcjl.com/news/1666/