HTML text ellipsis beyond maximum width displayed

1. The overflow of a single line of text displays an ellipsis, add the following CSS properties

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

2. Single and multi-line text overflows and displays ellipsis

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

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

text-overflow: ellipsis  supported by all browsers

-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. In order to achieve this effect it needs to be combined with other webkit properties.

Common binding properties:

display: -webkit-box; must be combined to display the object as a flexible box model.

-webkit-box-orient must be combined with the property to set or retrieve the arrangement of the child elements of the flex box object.

Three, table td single line overflow display ellipsis

    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 must be set, otherwise the width inherits the parent element