利用css实现文本的单行溢出省略和多行溢出省略

如何利用css实现文本的单行溢出省略和多行溢出省略，下面web建站小编给大家详细介绍一下具体实现代码！

单行溢出省略

div {
  width:300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行溢出省略

//按照行数省略
div {
  width:300px;
  display:-webkit-box;
  text-overflow:ellipsis;
  -webkit-line-clamp:2; /*控制行数*/
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

//按高度省略
div {
  position: relative;
  width:300px;
  max-height: 40px;
  overflow: hidden;
  line-height: 20px;
}

div::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

span点击事件后实现点击事件禁用（类似按钮disabeld方法）

如何利用css语法控制文本显示行数

css如何去掉滚动条占用的高度

利用-webkit-line-clamp控制文本行数不生效解决方法

css如何解决文字和图片对不齐的问题

标签： css, 溢出省略

上面是“利用css实现文本的单行溢出省略和多行溢出省略”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3453.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！