HTML テキストの省略記号が最大幅を超えて表示される

1. 単一行のテキストのオーバーフローには省略記号が表示されます。次の CSS プロパティを追加します。

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

2. 単一行および複数行のテキストがオーバーフローし、省略記号が表示される

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

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

text-overflow: 省略記号は すべてのブラウザでサポートされています

-webkit-line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。この効果を実現するには、他の Webkit プロパティと組み合わせる必要があります。

共通のバインディング プロパティ:

オブジェクトをフレキシブル ボックス モデルとして表示するには、display: -webkit-box; を組み合わせる必要があります。

-webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得するプロパティと組み合わせる必要があります。

3、テーブル td 単一行オーバーフロー表示省略記号

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

 テーブルの幅を設定する必要があります。設定しない場合、幅は親要素を継承します。