Using CSS text-overflow: ellipsis on anchor tags

In this article, we’ll explain how to use the CSS property text-overflow: ellipsis on anchor tags. This property displays an ellipsis when text exceeds the width of its container, improving the user experience.

Read more: CSS Tutorial

What is text-overflow: ellipsis

The text-overflow property defines how text is displayed when it overflows its container. The ellipsis value indicates that overflowing text is represented by an ellipsis (…).

Let’s look at a simple example first:

This is a long text that will overflow the anchor tag container

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

In the example above, we add a class called overflow to the anchor tag and use CSS properties to set the width of the element to 200 pixels, without wrapping the text, hiding the overflow, and using text-overflow: ellipsis to display an ellipsis.

Example Analysis

In the example above, we use the following CSS properties:

• width: defines the width of the anchor tag to 200 pixels. By setting a fixed width, text overflows when it exceeds its container.
• Setting white-space to nowrap means the text won’t wrap. This is key to preventing text from overflowing the container.
• Setting overflow to hidden hides the text when it overflows the container, preventing the portion that exceeds the container from being displayed.
• Setting text-overflow to ellipsis uses ellipsis to indicate overflowing text.

By combining these CSS properties, we can achieve the same effect as using text-overflow: ellipsis on an anchor tag.

More Examples

In addition to the examples above, we can also make further adjustments and extensions based on our needs. Here are some common examples:

Example 1: Limiting Lines and Omitting Text

This is a long text that will overflow the anchor tag container 

.overflow-2-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
} 

The above example uses WebKit-specific properties to set the number of lines to truncate text and uses text-overflow: ellipsis to display ellipsis. Note that this example may have compatibility issues across different browsers.

Example 2: Add mouseover effect

This is a long text that will overflow the anchor tag container 

.overflow-hover {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.overflow-hover:hover {
white-space: normal;
overflow: visible;
}

In the above example, by adding the :hover pseudo-class, the text is restored to its original state when the mouse hovers over the anchor tag, allowing the user to see the entire text.

Example 3: Compatibility in Different Browsers

When using text-overflow: ellipsis, pay attention to compatibility between different browsers. Here are some examples of property settings for different browsers:

.overflow-compatibility {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

/* Firefox */
display: -moz-box;
-moz-box-orient: vertical;
-moz-line-clamp: 2;
}

.overflow-compatibility:hover {
/* Firefox */
white-space: normal;
overflow: visible;

/* WebKit */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: unset;
}

By using browser-specific properties, we can achieve similar effects in different browsers.

Summary

Through this article, we learned how to use text-overflow: ellipsis on anchor tags to display overflowed text, and provided detailed examples. Different examples showcased common application scenarios and techniques, as well as browser compatibility.

In actual development, based on requirements and target browser compatibility, we can choose the appropriate method to use text-overflow: ellipsis and combine it with other CSS properties to achieve more flexible effects. Proper use can enhance user experience and interface aesthetics.