How to achieve the ellipsis effect beyond the part in html

Omitting the excess part in HTML is a common design requirement. When text content overflows the bounds, we usually truncate it and replace it with ellipses. Not only does this make the content look cleaner, but it also provides a better user experience. This article will introduce how to use CSS to achieve the effect of omitting excess parts of HTML.

text-overflow property

When realizing the effect of omitting the excess part of HTML, we usually use the text-overflow property of CSS. Its function is to specify how the excess part should be handled when the text content in an element overflows its container.

This attribute has 3 values:

• clip: Default value, the excess part will be clipped and not displayed.
• ellipsis: The excess part is replaced with ellipses.
• string: The excess part is replaced with the given string.

Among them, the most commonly used one is ellipsis, because it can achieve the ellipsis effect simply and quickly.

white-space attribute

When using the text-overflow attribute, we also need to set the white-space attribute. This property specifies how whitespace within the element is handled. The default value is normal, which means to merge consecutive whitespace characters and convert newlines to spaces.

If we want to preserve consecutive space characters in the text, we need to set the white-space attribute to pre-wrap. Also, text-overflow will only take effect if the white-space property is set to nowrap and pre-wrap.

Use CSS to achieve the ellipsis effect

The following is an example of using CSS to achieve the ellipsis effect:

<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>

In the above example, we created a block level with width Element to hold text content. Next, we set the white-space property to nowrap so that consecutive spaces in the text are not merged. We use the overflow attribute to hide the overflow part and use text-overflow: ellipsis to replace it with ellipses.

Appropriate use of ellipses effects

Although using ellipsis effects can make the content tidier, we also need to use ellipses appropriately to ensure user experience. Here are some suggestions for proper use of HTML ellipses:

• Use ellipses only where necessary. If all text is replaced with ellipses, this will confuse users because they won't know what the hidden text is.
• Reserve enough space for ellipses. Generally, we should leave some space for ellipsis to ensure that users can correctly understand the truncated part of the text content.
• Use ellipses when reading long paragraphs of text. Ellipses in text are often used when readers "quickly skip" unnecessary information, such as long paragraphs of comments or articles that are longer than the width of the screen. In this case, ellipses provide a better user experience because it makes it easier for readers to understand the summary of the text.

Summary

In this article, we introduced how to use CSS to achieve the effect of omitting excess parts in HTML. We mainly use text-overflow and white-space properties to achieve this purpose. Finally, we also give some suggestions for the appropriate use of ellipses to help you optimize the user experience.

The above is the detailed content of How to achieve the ellipsis effect beyond the part in html. For more information, please follow other related articles on the PHP Chinese website!