html文字超过的部分显示为省略

最新推荐文章于 2021-11-18 17:57:51 发布

hh湫丶

最新推荐文章于 2021-11-18 17:57:51 发布

阅读量454

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/lovezhuer1/article/details/107862444

版权

1.单行文本超出省略

实现方式：

overflow: hidden;
white-space: nowrap;   /* 文本不会换行 */
text-overflow: ellipsis;  /* 显示省略符号来代表被修剪的文本 */

实现代码：

<style>
   p{
        width: 300px;
        overflow: hidden;
        white-space: nowrap;   
        text-overflow: ellipsis;
    }
</style>
<body>
	<p>用css实现单行文本的溢出显示省略号,同学你会吗/p>
</body>

实现效果：
在这里插入图片描述
2. 多行文本超出省略

实现方式：

display: -webkit-box;  /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical;  /* 设置伸缩盒对象的子元素的排列方式为垂直的 */
-webkit-line-clamp: 3;  /* 限制在一个块元素显示的文本的行数 */
overflow: hidden;

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端

实现代码：

<style>
div{
      width: 300px;
      display: -webkit-box;  
      -webkit-box-orient: vertical;  
      -webkit-line-clamp: 3;  
      overflow: hidden;
  }
</style>
<body>
    <div>
        用css实现多行文本的溢出显示省略号,同学你会吗？用css实现多行文本的溢出显示省略号,同学你会吗？用css实现多行文本的溢出显示省略号,同学你会吗？用css实现多行文本的溢出显示省略号,同学你会吗
    </div>
</body>

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