css ellipsis [css] - blog.howtoclicks.com

css ellipsis

css

An ellipsis (…) is a series of three dots that indicates that there is more text or content that is being truncated or omitted. In CSS, you can use the text-overflow property to add an ellipsis to text that overflows its container.

Here’s an example of how you might use the text-overflow property to add an ellipsis to text that overflows its container:

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

This styles an element with the class ellipsis to have a fixed width of 100 pixels, to prevent the text from wrapping to a new line, and to hide any text that overflows the container. It also adds an ellipsis to the end of the text to indicate that there is more content that is being truncated.

Here’s an example of how you might use this in an HTML document:


<div class="ellipsis">
    This is some long text that will be truncated and an ellipsis will be added to the end.
</div>

The text in the element will be truncated to fit within the 100-pixel width of the container, and an ellipsis will be added to the end to indicate that there is more content that is being truncated.

css ellipsis

Other Article on Tag css

All Tags