如何设置文本不换行省略号显示等CSS常用文本
1 回答
慕容森
TA贡献1853条经验 获得超18个赞
whitespace:nowrap
中文行末不断行显示
overflow：
控制超出文本的显示方式：hidden 超出范围文本隐藏；scroll 始终显示滚动条；auto 根据文字多少自动显示滚动条
text-overflow：
在overflow设置隐藏的情况下怎么显示
clip裁剪ellipsis省略号显示
那么让多余文字省略号显示需要以下三步：
①white-space：nowrap;如果是中文 设置文字超出范围不断行
②overflow：hidden；设置超出控件范围隐藏；
③text-overflow：ellipsis; 设置多余文本隐藏显示；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 100px;height: 100px;background-color: green;}li{color: red;list-style: none;}.li{color: blue;font:italic bold 75%/1.8 "Microsoft Yahei",san-serif;font-weight: lighter;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style></head><body><div><ul><li class="li">第一项第一项第一项第一项第一项</li><li>第二项</li><li>第三项</li><li>第四项</li></ul></div></body></html>
- 1 回答
- 0 关注
- 590 浏览
添加回答
举报
0/150
提交
取消