前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css控制文本超出省略(单行、两行、多行)

css控制文本超出省略(单行、两行、多行)

原创
作者头像
肥晨
发布2023-04-04 14:31:41
1.3K0
发布2023-04-04 14:31:41
举报
文章被收录于专栏:CSS农民工前端CSS

想要控制文本长度?

想要文本超出隐藏?

还想要不用JavaScript实现?

让我们来用css试试吧~

本文重点

css控制文本超出省略。完成单行、两行、多行的效果

注意点

本文提到的方法 都需要控制元素width的大小

单行省略:

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

两行省略:

代码语言:txt
复制
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 超出几行省略 */
  overflow: hidden;

多行省略:

代码语言:txt
复制
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 超出几行省略 */
  overflow: hidden;

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本文重点
  • 注意点
  • 单行省略:
  • 两行省略:
  • 多行省略:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档