Puntos suspensivos de texto HTML más allá del ancho máximo mostrado

1. El desbordamiento de una sola línea de texto muestra puntos suspensivos, agregue las siguientes propiedades CSS

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

2. El texto de una o varias líneas se desborda y muestra puntos suspensivos

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

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

desbordamiento de texto: puntos suspensivos  admitidos por todos los navegadores

-webkit-line-clamp se usa para limitar la cantidad de líneas de texto que se muestran en un elemento de bloque. Para lograr este efecto, debe combinarse con otras propiedades de webkit.

Propiedades de unión comunes:

display: -webkit-box; debe combinarse para mostrar el objeto como un modelo de caja flexible.

-webkit-box-orient debe combinarse con la propiedad para establecer o recuperar la disposición de los elementos secundarios del objeto de cuadro flexible.

Tres, puntos suspensivos de visualización de desbordamiento de una sola línea 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;
    }

 se debe establecer el ancho de la tabla, de lo contrario, el ancho hereda el elemento principal