再写页面过程中， 有时候会需要对超出宽度的文字进行隐藏并且显示省略号 。 今天， 我给大家介绍下css如何让超出宽度的文字显示省略号
文章插图
需要这些哦
html+css
Hbuilder代码编纂器
方式/
1打开代码编纂器， 新建test.html， 用来进修今天的内容
文章插图
2在页面body标签内， 新建一个class为study的div， 并在div标签内写上一段文字
文章插图
3再head标签下方， 新建style标签， 并在style标签内界说study的样式
文章插图
4在浏览器中打开test.html页面， 会发现文字跨越了div所设定的区域
文章插图
5回到编纂器， 在study的样式里加上：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
文章插图
6【css如何让超出宽度的文字显示省略号】再次在浏览器中打开test.html页面， 会发现超出的文字被埋没了， 而且显示了省略号
文章插图
注重事项需要利用white-space: nowrap让文字不换行显示
若有帮忙到您， 请给个赞哦！
以上内容就是css如何让超出宽度的文字显示省略号的内容啦， 希望对你有所帮助哦！
推荐阅读
- 如何给笑话段子发布评分
- 如何收藏他人csdn博客资源
- QQ浏览器如何更换搜索引擎
- 手机微信如何利用群发助手群发消息
- 如何查找附近的美团充电宝
- 绿萝如何水插繁殖
- 吊兰怎么养长得快茂密
- 土耳其梵猫应该如何训练
- 冬季怎样让绿萝长得快
- 曼岛无尾猫应该如何饲养