ホームページ > 記事 > ウェブフロントエンド > 単一行および複数行のテキストのオーバーフロー表示省略記号を実装する CSS メソッド
コード実装:
<code class="hljs xml"></code><p><span style="color:#009a61">//单行</span></p><p>.single-line{</p><p> width:200px;</p><p> overflow:hidden;</p><p> white-space:nowrap; </p><p> text-overflow:ellipsis;<br/></p><p>}</p><p><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"single-line"</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></p><p><span style="color:#009a61">//多行</span></p><p>.multiple-line{ </p><p> width:200px; </p><p> display:-webkit-box; </p><p> -webkit-box-orient:vertical; </p><p> -webkit-line-clamp:2; </p><p> overflow:hidden; </p><p>}<br/></p>
注: WebKit の CSS 拡張プロパティが使用されるため、このメソッドは WebKit ブラウザーとモバイル端末にのみ適用できます。
以上が単一行および複数行のテキストのオーバーフロー表示省略記号を実装する CSS メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。