css - 特定の幅の後の長い文章の文字を置き換える方法

Question

wordpressサイトを開発しています。ここをチェックしてください。フッター領域には、最新の投稿がリストされています。しかし、長い投稿タイトルを持つ投稿の場合、2行で表示されます.1つの投稿の投稿タイトルを1行で表示し、最後にいくつかのドットを実装したいと思います..... これどうやってするの ？

Answer 1

テキストを 1 行に制限する場合は、CSS3 を使用してこれを簡単に実現できます。ブロックレベルの要素 (あなたの場合、これは<li>タグになります) が必要です。 を使用してテキストが占める最大幅をwidth設定しoverflow、white-space、 、およびtext-overflowプロパティを設定します。

.title {
    overflow: hidden;
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

複数行のテキストが必要な場合、残念ながら CSS にはそのためのメカニズムがありません。私は個人的にjquery dotdotdotを問題なく使用しました。