HTMLの一部を超えて省略記号効果を実現する方法

HTML 内の余分な部分を省略することは、一般的な設計要件です。テキスト コンテンツが境界を越える場合、通常はテキスト コンテンツが切り詰められ、省略記号に置き換えられます。これにより、コンテンツの見た目がすっきりするだけでなく、ユーザー エクスペリエンスも向上します。この記事では、CSSを使用してHTMLの余分な部分を省略する効果を実現する方法を紹介します。

text-overflow プロパティ

HTML の余分な部分を省略する効果を実現する場合、通常は CSS の text-overflow プロパティを使用します。その機能は、要素内のテキスト コンテンツがそのコンテナからオーバーフローした場合に、余分な部分をどのように処理するかを指定することです。

この属性には 3 つの値があります:

• clip: デフォルト値。余分な部分は切り取られ、表示されません。
• ellipsis: 余分な部分は省略記号に置き換えられます。
• string: 余分な部分は指定された文字列に置き換えられます。

その中で、最もよく使用されるのは ellipsis です。これは、省略記号効果を簡単かつ迅速に実現できるためです。

white-space 属性

text-overflow 属性を使用する場合は、white-space 属性も設定する必要があります。このプロパティは、要素内の空白を処理する方法を指定します。デフォルト値は normal で、これは連続する空白文字を結合し、改行をスペースに変換することを意味します。

テキスト内の連続するスペース文字を保持したい場合は、空白属性を pre-wrap に設定する必要があります。また、text-overflow は、white-space プロパティが nowrap および pre-wrap に設定されている場合にのみ有効になります。

CSS を使用して省略記号効果を実現する

次は、CSS を使用して省略記号効果を実現する例です:

<style>
  .ellipsis {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat magna vel leo sollicitudin convallis. Sed vestibulum auctor purus a tristique.
</div>

上の例では、ブロック レベルを作成しました。 width テキストコンテンツを保持する要素。次に、テキスト内の連続するスペースがマージされないように、white-space プロパティを nowrap に設定します。 overflow 属性を使用してオーバーフロー部分を非表示にし、text-overflow: ellipsis を使用して省略記号に置き換えます。

省略記号効果の適切な使用

省略記号効果を使用するとコンテンツをすっきりさせることができますが、ユーザー エクスペリエンスを確保するために省略記号を適切に使用する必要もあります。 HTML の省略記号を適切に使用するためのヒントをいくつか示します。

• 省略記号は必要な場合にのみ使用してください。すべてのテキストが省略記号に置き換えられると、ユーザーは隠しテキストが何であるか分からなくなり混乱することになります。
• 楕円用に十分なスペースを確保してください。一般に、ユーザーがテキスト コンテンツの切り詰められた部分を正しく理解できるように、省略記号用のスペースを残しておく必要があります。
• テキストの長い段落を読むときは、省略記号を使用します。テキスト内の省略記号は、長いコメントや画面の幅より長い記事など、読者が不必要な情報を「スキップ」する場合によく使用されます。この場合、省略記号を使用すると、読者がテキストの概要を理解しやすくなるため、ユーザー エクスペリエンスが向上します。

まとめ

この記事では、CSS を使用して HTML の余分な部分を省略する効果を実現する方法を紹介しました。この目的を達成するために、主にテキスト オーバーフローと空白のプロパティを使用します。最後に、ユーザー エクスペリエンスを最適化するために、楕円を適切に使用するためのいくつかの提案も示します。

以上がHTMLの一部を超えて省略記号効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。