前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实现单/多行文本溢出显示省略号

实现单/多行文本溢出显示省略号

原创
作者头像
V站CEO-西顾
发布2018-07-27 16:10:22
1.3K0
发布2018-07-27 16:10:22
举报
文章被收录于专栏:V站V站

单行文本:

代码语言:javascript
复制
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本:

代码语言:javascript
复制
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;  /*设置行数,第二行省略号*/
overflow: hidden;

文本溢出解决办法:

代码语言:javascript
复制
.nowrap{white-space:nowrap;} /* 允许单词内断句,首先会尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句 */
.breakword{word-wrap: break-word;}  /* 断句时,不会把长单词挪到下一行,而是直接进行单词内的断句 */
.breakAll{word-break:break-all;}  /* 超出部分显示省略号 */
.ellipsis{text-overflow:ellipsis;overflow:hidden;

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 单行文本:
  • 多行文本:
  • 文本溢出解决办法:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档