css3 文本超出容器后显示...以及超出几行后显示...

前言

好记性不如烂笔头,记录一下自己常用的css样式。

一,文本超出容器后显示...

css 复制代码
<div class="ellipsis-main">国际酒店政策国际酒店政策国际酒店政策国际酒店政策国际酒店政策</div>
.ellipsis-main{
  width: 100%;
  height: 40px;
  border: 1px solid #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

二,文本超出几行后显示...

css 复制代码
<div class="ellipsis-main-line">国际酒店政策国际酒店政策国际酒店政策国际酒店政策国际酒店政策</div>
.ellipsis-main-line {
  display: -webkit-box;
  text-overflow: ellipsis;
  line-clamp: 5;      //这个就是设置超出5行后显示...
  -webkit-line-clamp: 5;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
相关推荐
Apifox6 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞9 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行9 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581010 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周14 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队32 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Enti7c35 分钟前
HTML5和CSS3的一些特性
开发语言·css3
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript