Text Truncate Using Css

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

0
0
190
Welcome to CodeXpress Forum Script - Download NL script Free


No comments. Be first to post a comment.

Reply to this article


Welcome, Guest: Join to reply login to reply!

♣ Post Statistic

1 guest(s) viewing this topic

Related Post

Text Truncate Using Css

♣ CodeXpress Statistic

Welcome, Guest: Join CodeXpress Login

17 Members, 135 topics and 9 posts
Date: Friday 01 July 2022 at 02:41 AM

Top 5 Contributors

People who started the most discussions on codexpress.

  1. 17
  2. 92
  3. 3
  4. 11
  5. 1

Sections

CodeXpress / General:
Politics, Business, Investment, Career, Autos, Counties, Properties, Agriculture, Health, Travel, Family, Culture, Religion, Food, Pets, Romance, Diaspora, Africa, International Forum, World List Directory, How To,
Science/Technology:
Programing, Webmasters, Computers, Phones, Art, Graphics & Video, Technology Market, CSS, Innovation, PHP 7x, Vanilla JS, Software Updates,

♣ Users Online: (1)

0 Members and 1 Guests online in last 5 minutes!


Sections:

Career, Pets, Politics, Religion, Health, Technology Market, PHP 7x, Programing, Webmasters, Phones, Gaming, Theatre/Comedy, Music/Radio, Sports, Celebrities,

CodeXpress - Copyright © 2019 - 2022 Marshall Unduemi. All rights reserved. See How To Advertise.
Disclaimer: Every CodeXpress member is solely responsible for anything that he/she posts or uploads on CodeXpress.