CSSで3つの点を非表示にする方法

CSS で 3 つのドットを非表示にする方法: 1. 単一行の場合、テキスト オーバーフローは CSS 属性「text-overflow: ellipsis;」を使用して 3 つのドットとして表示できます。複数行の場合、これは属性「overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;」によって実現できます。

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

スリーポイントの実現方法CSSに隠れてる？

CSS テキストのオーバーフローは 3 つのドットとして非表示になります...

(1)単一行

white-space: nowrap;//不换行
text-overflow: ellipsis;//将文本溢出显示为（…）
overflow: hidden;//溢出隐藏。

(2)複数行

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

注: text -overflow 属性は、テキストが含まれる要素からオーバーフローした場合に、テキストをどのように表示するかを指定します。オーバーフローの後、テキストを切り取ったり、省略記号 (...) を表示したり、カスタム文字列を表示したりするように設定できます (すべてのブラウザーでサポートされているわけではありません)。

text-overflow は、次の 2 つの属性とともに使用する必要があります:

white-space: nowrap;
overflow: hidden;

Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

Value

clip テキストを切り取る。

ellipsis トリミングされたテキストを表す省略記号 ... を表示します。

string 指定された文字列を使用して、トリミングされたテキストを表します。

initial はプロパティのデフォルト値に設定されます。

inherit この属性値を親要素から継承します。

推奨学習: 「css ビデオ チュートリアル 」

以上がCSSで3つの点を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。