CSS three dots in one line

CSS Three Dots in One Row

CSS Three Dots in One Row

CSS is an indispensable part of web design and development. It allows us to flexibly control the style and layout of the page. In real-world development, we often encounter special situations, such as needing to display overly long content within a single line without wrapping it. In these cases, we can use CSS’s “three dots per line” technique to achieve this effect.

What are three dots per line?

Three dots per line, also known as overflow ellipsis, is a common solution for displaying overly long text within an element by displaying an ellipsis at the end of the text to indicate the omitted portion. This effect is often used to save space or to let users know that text is truncated.


How to implement three dots in a line?

In CSS, three dots in a line are typically created using the text-overflow: ellipsis; property. Below, we’ll discuss how to use this property to achieve this effect.

How to Use

  1. First, we need to set the element’s white-space property to nowrap. This will keep the text within the line without automatically wrapping.
  2. Next, set the element’s overflow property to hidden to hide any content that overflows the element.
  3. Finally, set the element’s text-overflow property to ellipsis to display an ellipsis at the end of the text.

The following is a simple example code that demonstrates how to use CSS to achieve the effect of three dots in one line:

.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 150px; /* Adjust the width according to actual needs */ 
} 
<div class="ellipsis">This is a long text that demonstrates the CSS effect of three dots in one line</div> 

Demonstration

The following is the effect obtained using the above example code:

As shown above, when text exceeds the width of an element, an ellipsis appears, and the truncated portion of the text is hidden. This not only saves space but also clearly indicates to the user that the text is truncated.

Summary

By effectively using the CSS text-overflow: ellipsis; property, we can easily achieve the “three dots per line” effect, making the page display more concise and aesthetically pleasing. During development, if you encounter a situation where you need to display overlong content within a single line, consider using “three dots per line” instead.

Leave a Reply

Your email address will not be published. Required fields are marked *