单行省略

单行文本超出

众所周知，给文本超出显示省略号，只要加上三行样式就可以。


.single {
  width: 200px;
  + white-space: nowrap;
  + overflow: hidden;
  + text-overflow: ellipsis;
}

其中 white-space:nowrap 的意思是空格不换行。

在Web的默认排版中，空格是换行点，超出容器的内容就会在空格处换行，当设置了nowrap 内容自然就一行显示了。

题外话：Web中还有一个自动合并空格的特性，也就是连续敲打的空格默认会按照一个空格渲染，这时候我们需要显示原来的空格的话，也是用 white-space 进行设置。


    white-space: pre; // 可以让空格不合并，同时不会换行显示；
    white-space: pre-wrap; // 可以让空格不合并，同时宽度不足时候可以换行显示；

如果希望省略号在前面显示，可以使用 direction 属性。


.single {
  + direction: rtl;  // 文本排列方向 阿拉伯文常用排列
}

还有 unicode-bidi 这个属性跟它搭配使用，具体的可以自由尝试。

例如：


    direction: rtl;
    unicode-bidi: bidi-override;

单行标签超出

正常会是以下显示


.single {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #8f8f92; // 省略号会用最近的父级颜色 
}

.single span {
    + display: inline-block;
}

将原本属性为 inline 的改成 inline-block 之后，就会显示成下面的形式。

多行省略

多行文本超出省略常用 line-clamp

但它需要使用 display: -webkit-box; 和 -webkit-box-orient: vertical; 才能生效。

.multi {
    width: 200px;
    overflow : hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 行数
    -webkit-box-orient: vertical;
}

超长滚动

示例中的动画是循环来回滚动，但使用中可以自己调整，根据不同的内容长度去计算一个延迟时间以及判断是否需要加类让它滚动。

/** 例如 单次滚动动画的持续时长 */
animationDuration = (textWidth - containerWidth) / speed * 1000;


.item-title {
     overflow: hidden;
      .shadow {
        width: 200px;
        overflow: scroll;

// ......省略

        .txt {
          display: inline-block;
          width: auto;
          &.is--scroll {
            animation: txtScroll 4s linear 1s infinite alternate;
            // 名称 时长 运动速度 延迟 往返动画
            animation-fill-mode: forwards;
          }
        }
      }
    }


@keyframes txtScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(180px - 100%)) 
    // 自身宽度 - 父容器宽度 - 左边的距离（单纯美观）;
  }
}

一些使用规则

text-overflow 生效的条件

1. 块级元素
2. overflow: 计算值/非visible;
3. 元素宽度：超出时，有一个确切的计算值
4. white-space: nowrap | pre;

多行文本省略

1. display: -webkit-box | -webkit-inline-box;
2. -webkit-box-orient: vertical | block-axis;
3. overflow: 计算值/非visible;
4. -webkit-line-clamp: lineNum // 给*块容器*中的内容限制为指定的行数;

奇奇怪怪的疑问

当祖辈元素使用flex布局，孙代元素超出省略不生效。

<div class="gf">
    <div class="f">
        <div class="s">
            弹性布局下的后代元素超出省略不生效弹性布局下的后代元素超出省略不生效弹性布局下的后代元素超出省略不生效弹性布局下的后代元素超出省略不生效弹性布局下的后代元素超出省略不生效弹性布局下的后代元素超出省略不生效
        </div>
    </div>
</div>


    .gf {
        display: flex;
        width: 300px;
        border: 1px solid #f60;
    }
    .f {
        flex: 1;
    }
    .s {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

结果是这样的

这时候给父辈容器也就是使用了 flex: 1;的, 添加以下代码

    .f {
       + min-width: 0;  // width: 0 | 100% | inherit; 
       // 如果 flex 排列方向为column，则设置 height
       // 或者
       + overflow: hidden;
    }

这时候它就正常显示了

其中W3C中的规范说的是：

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.

默认情况下，弹性元素（通常我们设置成 flex: 1;)不会缩小到它们的最小内容大小（最长单词或固定大小元素的长度）以下。

欧克～差不多就想到这了，单纯个人记录总结，欢迎补充～

coco姐相关的讲解

大漠老师关于溢出的讲解

MDN中line-clamp的介绍

CSS记录(01)—— 文本超长处理