CSS テキストオーバーフロー表示の省略記号効果 (text-overflow) の詳細な図による説明-CSSチュートリアル-php.cn

CSS テキストオーバーフロー表示の省略記号効果 (text-overflow) の詳細な図による説明

yulia

リリース： 2018-09-27 10:19:15

オリジナル

5351 人が閲覧しました

職場でテキストのオーバーフローが頻繁に発生し、省略記号を表示する必要があります。この省略記号はどのように実装されていますか?この記事では、CSS で text-overflow を使用して、余分な部分に省略記号 を表示する方法を説明します。 CSS テキストオーバーフローと省略記号 に詳しくない友人は、参考にしていただければ幸いです。

text-overflow 属性は、テキストがそれを含む要素を超えた場合に、その余分な部分をどのように表示するかを示します。

記述:text-overflow:clip | ellipsis

属性値の説明:

clip:テキストをトリミングすることを意味し、余分な部分には省略マークが表示されません

省略記号: テキストがオーバーフローした場合に省略記号が表示されることを示します (...)

注: text-overflow は、テキストがオーバーフローした場合にテキストを表示する方法を説明するためにのみ使用されます。オーバーフローしたときにそれを表示したい場合は、省略記号の効果により、テキストが 1 行で表示され (white-space:nowrap)、オーバーフローの内容が非表示になる (overflow:hidden Only) 必要があります。このようにして、テキストのオーバーフローと省略記号の表示の効果を実現できます。コードは次のとおりです。 #white-space:nowrap;

例: 人生には現在だけではなく、詩や遠くの野原も含まれます。あなたは海を求めて素手でこの世界にやって来ました。この文章が指定範囲を超える場合は、別の効果を設定します。コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{border:1px solid #000000;width: 300px;white-space: nowrap;overflow: hidden;}
.a1{text-overflow: clip;}
.a2{text-overflow:ellipsis;}
</style>
</head>
<body>
<div class="a1">生活不止眼前的苟且，还有诗和远方的田野。你赤手空拳来到人世间，为找到那片海不顾一切</div>
<div class="a2">生活不止眼前的苟且，还有诗和远方的田野。你赤手空拳来到人世间，为找到那片海不顾一切</div>
</body>
</html>

ログイン後にコピー

レンダリング:

図に示すように、最初の div は text-overflow: Clip 属性を使用しています。その一部は直接切り取られます。つまり、あふれた部分は切り取られます。 2 番目の div は text-overflow:ellipsis を使用します。テキストがオーバーフローする場合、通常はオーバーフロー部分に省略記号が追加されます。

概要: 単一行のテキストをオーバーフローさせて省略記号を表示する必要がある場合は、text-overflow 属性を使用できます。 text-overflow には 2 つの値があります。省略記号の効果が必要な場合は、省略記号を使用する必要があります。仕事で何を使うかは状況によって異なります。以上、CSSの余分な部分に省略記号を追加する方法の紹介でした。

以上がCSS テキストオーバーフロー表示の省略記号効果 (text-overflow) の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。