前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css实现文本超出显示…

css实现文本超出显示…

作者头像
RobinsonZhang
发布2018-08-28 11:43:02
1.2K0
发布2018-08-28 11:43:02
举报

文本超出为省略号在很多位置都会用到,作为一个基本样式或者说原子类样式,我们需要知道其实现原理为什么。

使用场景

文字内容过多,超出盒子模型的内容显示为省略号。提示:无论是单行还是多行文本,都需要设置高度,行高,超出不可见。(仅供参考)

文本单行省略

代码语言:javascript
复制
.demo{
white-space:nowrap;(超出不换行,默认为换行的)
text-overflow:ellipsis;(省略号样式)
//代码部分 完整部分
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
} 

文本多行省略 (-webkit-)

代码语言:javascript
复制
white-space:normal;(超出宽度换行)
text-overflow: ellipsis; (省略号样式)
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;(行数)
display: -webkit-box;(展示盒子模型类型)
//代码部分(供拷贝)
overflow:hidden;
white-space:normal;
text-overflow: ellipsis; 
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;

其他方案

  • 引入jq插件,待补充
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-02-272,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用场景
  • 文本单行省略
  • 文本多行省略 (-webkit-)
  • 其他方案
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档