text-overflow 介绍: 处理未显示的溢出内容

# text-overflow 介绍: 处理未显示的溢出内容

可选值:

1. **clip**,默认值,表示在内容区域的极限处截断文本
2. **ellipsis**, 意思是省略号,用...来表示被截断的文本,如果空间太小放不下省略号,这个字符串也会被截断
3. **string** 用来表示被截断的文本,字符串内容将被添加在内容区域,现在大部分浏览器还不支持

# text-overflow:ellipsis 添加使用无效

  1. 解决方法
width: 100%; /*也可以是固定值,min-width等*/
white-space: nowrap; /*强制文本不能换行*/
overflow: hidden; /*隐藏溢出内容*/
text-overflow: ellipsis;
1
2
3
4
  1. 如果是行内元素 还需再加上 display:block, 因为行内元素的默认宽度就是文字的宽度且无法设置 width
上次更新: 4/29/2022, 12:51:22 PM