文本一行展示溢出用...表示

文本一行展示溢出用’…'表示

在实际开发中，会经常遇到需要在一行展示文本信息，溢出的部分用’…'表示。这个其实很简单的。只要用给该元素加上以下属性即可。

    display: inline-block;  // 转成行内块
    overflow: hidden;
    width: 100px;  // 宽度必设
    word-break: keep-all;
    white-space: nowrap;  // 一行展示
    text-overflow: ellipsis;  //溢出变成...