2022/03/08 CSS

Table内でもellipsisを使って、更にbr改行を含むコンテンツにも対応させる

デフォルトではTableタグ内ではellipsisは効かないそうだが、組んだあとで気づいた場合は以下で対応。

table {
    table-layout: fixed;
    /*上記を入れるならthとtdに幅指定もするコト*/
    width: 100%;
}

に続いて対象要素に

.target {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

で一旦完了だが、稀にWP側で登録した内容に改行（br）が含まれている場合は、複数行表示されてしまう。
なので、

.target {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    br {
        display: none;
    }
}

とCSSで非表示にすることで解決。