2 行を超える表示省略を実装する Css メソッド: 最初に HTML サンプル ファイルを作成し、次に本文のテキスト コンテンツを定義し、最後に属性 "-webkit-line-clamp: 2;overflow" を設定します。 style : hidden;」を省略すると、省略以上の効果が得られます。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター
CSS はテキストが制限を超えていることを認識します。文字列が 2 行を超える場合 余分な部分には省略記号が表示されます
余分な部分には省略記号が表示されます
<style> .p{ width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <body> <p class="p"> 我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本 </p> </body>
文字列が 2 行を超える場合余分な部分には省略記号が表示されます。
<style> .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 这里是超出几行省略 */ overflow: hidden; } </style> <body> <p class="p"> 我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本 </p> </body>
推奨学習: 「css ビデオ チュートリアル 」
以上がCSSで2行以上の表示省略を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。