首页 前端知识 css3 文本超出容器后显示...以及超出几行后显示...

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

2024-09-30 23:09:08 前端知识 前端哥 44 211 我要收藏

前言

好记性不如烂笔头,记录一下自己常用的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;
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18818.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!