文本溢出显示省略号

最新推荐文章于 2024-04-10 14:11:26 发布

Crush-lph

最新推荐文章于 2024-04-10 14:11:26 发布

阅读量404

点赞数 2

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_45886500/article/details/119965365

版权

css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

单行文本溢出显示…

<div class="text">
    <p>Baihai Li, Michael B. Katz,Yingwen Duan, Xianfeng Du, Kui Zhang, Liang Chen, Anton Van der Ven, George W. Graham,
      and
      Xiaoqing Pan, A Joint Theoretical and Experimental Study of Phase Equilibria and Evolution in Pt-Doped Calcium
      Titanate
      under Redox Conditions,Chemistry of Materials,27, 18(2015).
    </p>
  </div>

效果如下：
在这里插入图片描述
我们想让他单行显示，并且溢出容器的部分显示为省略号，设置如下css属性就可以轻松实现

  .text {
      width: 600px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #333;
    }

    .text p {
      /* 文本不换行 */
      white-space: nowrap;
      /* 溢出隐藏 */
      overflow: hidden;
      /* 溢出文本显示为省略号 */
      text-overflow: ellipsis;
    }

效果如图：
在这里插入图片描述

多行文本溢出显示省略号

.text p{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    }

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

效果如图：
在这里插入图片描述
另外还有一种方式

div p{
	position: relative;
	/*设置单行行高 */
    line-height: 20px;
    /*这个值应为line-height的整数倍*/
    max-height: 40px;
    overflow: hidden;
}

div p:after{
	content:'...'
	position:absolute;
	bottom:0;
	right:5px;
	background:-webkit-liner-gradient(left,transparent,#fff 55%);
	}