ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。