超出部分点点点，并修改点点点颜色

996 前端小伙子

已于 2022-10-20 15:54:32 修改

阅读量951

点赞数

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

于 2022-10-20 15:53:14 首次发布

本文链接：https://blog.csdn.net/weixin_41854372/article/details/127428614

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、单行文本、超出部分点点点

有宽度：width, 有宽度才能超出，所以至少是行内块级元素
不能换行：white-space:nowrap;
超出部分隐藏：overflow: hidden;
文本超出部分点点点：text-overflow: ellipsis;

.over_one_line{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}

二、多行超出显示

.over_two_line{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

三、设置点点点的颜色，大小

本身是无法设置的，但是可以通过父级设置

效果图：

代码：

<html>
  <head>
  <style>
    .over_one_line{
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow:ellipsis;
    }
    .box{
      width: 100px;
      color: #f00;
      font-weight: bolder;
      font-size: 20px;
    }
   .box span {
     color: #00f;
     font-weight: initial;
     font-size: 14px;
   }
  </style>
 </head>
  <body>
       <div class="box over_one_line">
         <span>000100010001000100010001000100010001000100010001</span>
       </div>
 </body>
</html>