首页 前端知识 CSS实现单行或者多行文本溢出隐藏并且显示省略号

CSS实现单行或者多行文本溢出隐藏并且显示省略号

2024-01-29 14:01:51 前端知识 前端哥 101 462 我要收藏

一、单行超出显示省略号

如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行;

详细步骤:

  • 第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略)
  • 第二步(溢出隐藏)overflow:hidden;
  • 第三步(文本溢出显示省略号)text-overflow:ellipsis;(省略号)
 white-space: nowrap;   //不换行
 overflow: hidden;       //超出部分隐藏
 text-overflow: ellipsis;    //文本溢出显示省略号

二、多行超出显示

省略号

对于内核是webkit的浏览器(Google/Safari),可以直接用CSS样式;

溢出隐藏:overflow: hidden;
省略号:text-overflow: ellipsis; display: -webkit-box;
弹性盒模型:
设置弹性盒子的子元素的排列方式 :-webkit-box-orient: vertical;
设置显示文本的行数:-webkit-line-clamp: 5; (最多显示5行)

overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//省略号
display: -webkit-box;//
-webkit-box-orient: vertical;//设置弹性盒子的子元素的排列方式
-webkit-line-clamp: 5;//设置显示文本的行数


 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/762.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!