记录日常常用css ，持续更新

最新推荐文章于 2024-10-02 15:35:50 发布

学习路漫漫

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量229

点赞数

分类专栏：学习笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_44902450/article/details/122218145

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

记录日常常用css ，持续更新。

解决长串url不换行导致span超出div的问题强制换行
单行省略号
双行省略号
三行省略号
n行省略号

word-break: break-all; //解决长串url不换行 导致span超出div的问题 强制换行`

//单行省略号
@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//双行省略号
@mixin ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

//三行省略号
@mixin ellipsis3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

//n行省略号
@mixin ellip($n: 3) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $n;
  -webkit-box-orient: vertical;
}