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

最新推荐文章于 2024-07-31 11:19:18 发布

郝艳峰Vip

最新推荐文章于 2024-07-31 11:19:18 发布

阅读量1k

点赞数

分类专栏： css 文章标签： css3 javascript 前端

本文链接：https://blog.csdn.net/ww_5211314/article/details/133063819

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS实现文本超出容器后的单行省略（`.ellipsis-main`）和多行限制（`.ellipsis-main-line`），通过`text-overflow`,`line-clamp`等属性控制显示效果。

摘要由CSDN通过智能技术生成

前言

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

一，文本超出容器后显示…

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

二，文本超出几行后显示…

<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;
}