CSSを使って3行を超えた場合に1行だけ表示する方法

3 行を超えた場合に 1 行だけが表示されることを実現する CSS メソッド: 1. 対応する HTML ファイルを開きます; 2. テキスト タグの CSS 属性を「.text_singlerow {display:block」に設定します;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;}」を一行で表示できます。

#このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター

CSS のみを実現する方法3 行以上表示されます 1 行ですか?

CSS で複数行のテキストを表示する場合の行番号制御の表示

1 行のみ、または 2 行、または 3 行を表示する必要がある場合があります。複数行のテキストコンテンツの行. line. このとき、css で関連する属性を設定する必要があります. コードは次のとおりです:

// 多行显示
.text_morerow {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 显示2行
    -webkit-box-orient: vertical;
    word-break: break-all; 
}
 
 
// 单行显示
.text_singlerow {
    display:block; /*这里设置inline-block或者block；根据使用情况来定（行内元素需要加这个，块级元素和行内块级可以不用）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

2 行だけであると仮定することに注意してください表示されるように設定すると、2 行目の末尾は省略記号で表示されます。ラベルの高さが十分に高い場合、3 行目は引き続き表示されます。そのため、行数の表示を制御するには、 CSS スタイルの設定に加えて、ラベルの高さの設定も組み合わせる必要があります。

推奨学習: 「

css ビデオ チュートリアル 」

以上がCSSを使って3行を超えた場合に1行だけ表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。