CSSで楕円を越えた2本の線を実現する方法

CSS では、要素に 2 行以上のテキストを表示する必要がある場合がありますが、すべてのテキストを表示したくない場合は、「省略記号の 2 行を超える」方法を使用できます。 。

CSS では、テキスト オーバーフロー プロパティと空白プロパティを使用して、この効果を実現できます。 text-overflow は、テキストがコンテナを超える場合のスタイルを設定するために使用され、white-space はテキストが折り返されずにどのように表示されるかを制御するために使用されます。

まず、次の例のように、2 行に設定する必要があるテキストを固定幅コンテナに配置します:

<div class="container">这是需要超过两行的文本内容</div>

次に、CSS に次のスタイルを追加します。

.container {
  width: 200px;       /* 容器宽度 */
  height: 48px;       /* 容器高度，即两行高度 */
  overflow: hidden;   /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 超出内容用省略号代替 */
  white-space: nowrap; /* 不换行 */
}

このようにして、元の 2 行の高さを変えずに、2 行を超えるテキスト内容を「...」の形式で省略できます。

テキスト オーバーフローと空白はインターセプトされたテキストに対してのみ機能するため、コンテナ内のテキストのスタイルを設定したい場合は、他の関連属性を同時に使用する必要があることに注意してください。フォントサイズや行の高さなどの時間。

CSS は、省略記号を超える 2 行に加えて、単一行の省略記号、複数行の省略記号など、切り捨て方法を超える一連の同様のテキストも提供します。開発者は、実際のニーズに応じて選択して適用できます。 。

一般に、CSS の Beyond ellipses メソッドは、スペースをあまり占有せずに、テキスト コンテンツをより美しく、読みやすくするのに役立ちます。

以上がCSSで楕円を越えた2本の線を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。