CodeXpress

Welcome, Guest: Join CodeXpress Log In!

Stats: 11 Members, 99 topics and 9 posts Date:  Thursday 29 October 2020 at 09:36 PM

This is a product of CodeXpress Buy License for your website

Text truncate using css

CodeXpress / Science/Technology / CSS / Text truncate using css

31 people viewed

Text Truncate Using Css
(Go Down) (» Reply topic)
Text truncate using css by Marshallunduemi(): Wed 03, June, 2020
The text-overflow property in CSS deals with situations where text is clipped when it overflows the element’s box. It can be clipped (i.e. cut off, hidden), display an ellipsis (‘…’, Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).
.ellipsis {
text-overflow: ellipsis;

/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}


Note that text-overflow only occurs when the container’s overflow property has the value hidden, scroll or auto and white-space: nowrap;.

Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.

The following demo displays the behavior of the text-overflow property including all the possible values. Browser support varies!



HTML CSS

Result

EDIT ON


This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.




This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.




This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.




This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.




This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.




.overflow {
width: 10em;
outline: 1px solid #000;
margin: 0 0 2em 0;

/**
* Required properties to achieve text-overflow
*/
white-space: nowrap;
overflow: hidden;
}

Welcome to CodeXpress Forum Script - Download NL script Free
(» Go Up)

You must Sign in or Sign Up to post content

For you to post content on this website you have to log in or register, it only take few minute to create account

Go Up

Recommended for you

Text Truncate Using Css

Currently: 1 guest(s) reading this article

Developed by Codexpress Programming Labs
Post content
Powered by Marshall