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

郝艳峰Vip2023-09-21 9:42

前言

好记性不如烂笔头，记录一下自己常用的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;
}