HTML 超出最大宽度的文字省略号显示

一、单行文本的溢出显示省略号，添加如下 CSS 属性

    /* 强制不换行 */
    white-space: nowrap;
    /* 匀速溢出内容，隐藏 */
    overflow: hidden;
    /* 文字用省略号代替超出的部分 */
    text-overflow: ellipsis;
     

二、单多行文本溢出显示省略号

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

    /* -webkit-line-clamp: 3;  一个块元素显示的 3 行 */
 

text-overflow: ellipsis 所有浏览器都支持

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的webkit属性。

常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

三、table td 单行溢出显示省略号

    table{
        /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
        table-layout:fixed;
    }
    td{
        width:100%;
        /* 不换行 */
        word-break:keep-all;
        /* 不换行 */
        white-space:nowrap;
        /* 内容超出宽度时隐藏超出部分的内容 */
        overflow:hidden;
        /* 当对象内文本溢出时显示省略标记(…) ；需与overflow:hidden;一起使用。*/
        text-overflow:ellipsis;
    }

 table 必须要设置 width，否则宽度继承父级元素