html中内容超出显示省略号的方法

最新推荐文章于 2024-03-12 13:07:22 发布

Master.Yuan

最新推荐文章于 2024-03-12 13:07:22 发布

阅读量523

点赞数

分类专栏： css样式文章标签： css

本文链接：https://blog.csdn.net/yuanwen52/article/details/121406609

版权

css样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果如图：

单行

<p class="p1">
    这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden，当点击hidden时，滚动机制关闭
</p>

.p1{
   width: 200px;
   overflow:hidden;
   text-overflow:ellipsis; 
   background: goldenrod;
   white-space: nowrap;/*加宽度width属来兼容部分浏览*/
  }

多行

<div class="p2" title="这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden，当点击hidden时，滚动机制关闭，内容会被修剪，但是浏览器不会显示供查看内容的滚动条，默认值是 visible。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。">
    这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden，当点击hidden时，滚动机制关闭，内容会被修剪，但是浏览器不会显示供查看内容的滚动条，默认值是 visible。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</div>

.p2{
     width:220px;
     max-height:58px;
     overflow:hidden;
     text-overflow:ellipsis;
     display:-webkit-box;
     -webkit-box-orient:vertical;
     -webkit-line-clamp:2;
     overflow:hidden;
     background-color: blue;       
   }