首页 前端知识 CSS如果实现文本超出一行或多行时显示省略号...

CSS如果实现文本超出一行或多行时显示省略号...

2024-08-27 21:08:24 前端知识 前端哥 15 974 我要收藏

如果使用css样式实现文本超出单行或多行显示省略号,具体方法如下↓
在线DOME预览

一、单行超出显示省略号

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

关键点:

  • 第一步(不换行):white-space:nowrap;(对于连续的数字或者英文字母可省略)
  • 第二步(溢出隐藏)overflow:hidden;
  • 第三步(文本溢出显示省略号)text-overflow:ellipsis;(省略号)
具体代码如下
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
效果图:

在这里插入图片描述

二、多行超出显示省略号
  • 溢出隐藏:overflow: hidden;
  • 省略号:text-overflow: ellipsis; display: -webkit-box;
  • 弹性盒模型:
    • 设置弹性盒子的子元素的排列方式 :-webkit-box-orient: vertical;
    • 设置显示文本的行数:-webkit-line-clamp: 2; (最多显示2行)
具体代码如下

width:  100%;
height: 40px;
line-height: 20px;
// 下面才是重点关注代码
overflow: hidden;
display: -webkit-box;
 -webkit-box-orient: vertical;
 text-overflow: ellipsis; 
 white-space:  normal;
 -webkit-line-clamp: 2; /* 设置最大显示行数 */
效果图

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17062.html
标签
评论
发布的文章

jQuery 小技巧教程

2024-09-08 02:09:07

jQuery HashChange 插件指南

2024-09-08 02:09:07

jQuery-HAML 使用教程

2024-09-08 02:09:06

初识Jquery

2024-05-10 08:05:00

jQuery PJAX 使用教程

2024-09-08 02:09:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!