Text-overflow: Some Properties to Handle Text in CSS

This article TipsMake.com will work with you to learn how to handle text that is too long to cause an overflow of the element that contains it using attributes:

• text-overflow
• word-wrap
• word-break
• writing-mode

Text Overflow

The text-overflow attribute is used to handle a text that is overflowing from an element containing it by truncating the overflow or displaying it as a "." to mark the user.

The two most common values are:

• clip: cut off the spilled text (default).
• ellipsis: add three dots (.) if the text is spilled out.

The two attributes that come with text-overflow are:

• white-space: nowrap;
• overflow: hidden;

Example 1: Text processing overflows.

 p.test1 { 
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000; 
  overflow: hidden; 
  text-overflow: clip; 
 } 
 
 p.test2 { 
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000; 
  overflow: hidden; 
  text-overflow: ellipsis; 
 } 

Results show:

Full code:

Text-overflow attribute

The following paragraph contains long text that spills out of the box containing it.

text-overflow: clip:

TipsMake.com is a social network about science and technology

text-overflow: ellipsis:

TipsMake.com is a social network about science and technology

Example 2: Display the overflowed content when hovering over the element:

 div.test:hover { 
  overflow: visible; 
 } 

Hover over the two divs below, to see the entire text.

Word Wrap

The word-wrap attribute allows text to be downstream if it's too long, which can cause a word break.

The two most typical values are:

• normal: display by default, long words may be spilled out of the box (default)
• break-word: the text jumps down the line if the word is too long, can cause a word break.

Example: Processing text too long

 p1 { 
 word-wrap: normal; 
 } 
 
 p2 { 
 word-wrap: break-word; 
 } 

Results show:

Full code:

Word-wrap attribute

WebsiteTransportation Network Web SiteVietnamese Network is a social network about science learn technology.

WebsiteTransportation Network Web SiteVietnamese Network is a social network about science learn technology.

Word Break

Word-wrap determines whether or not the line is down, and the work-break attribute determines the type of flow.

Common values are:

• normal: display by default, long words may be spilled out of the box (default)
• Keep-all: not used with Chinese / Japanese / Korean (CJK) text, the same function as normal . The difference is that if the word has a hyphen, it will be downstream in an appropriate location.
• break-all: when the period ends, a word will automatically disconnect at any character to get down the line, which can cause a word break.
• break-word: when the period ends, it will automatically break at any word to get down.

If it is normal text, we will use break-word more, and break-all is typically used only for numbers (if any).

As an example,: The work-break attribute determines the type of flow

 pa { 
  word-break: normal; 
 } 
 
 pb { 
  word-break: keep-all; 
 } 
 
 pc { 
  word-break: break-all; 
 } 
 
 pd { 
  word-break: break-word; 
 } 

Word-break properties

word-break: normal (default):

WebsiteTransporting Network Web SiteVietnamese Network is a social network of science technology.

word-break: keep-all:

WebsiteTranslation Website Web Site Network is a network-society-about-science- technology.

word-break: break-all:

Website QuanTruongMay is a social network of science and technology.

word-break: break-all:

Website QuanTruongMay is a social network of science and technology.

Writing Mode

Writing-mode properties help style text that is placed horizontally or vertically.

Values of writing-mode:

• horizontal-tb: the text will be placed horizontally from left to right, reading from top to bottom (default).
• vertical-rl: the text is placed vertically from right to left, reading from top to bottom.
• vertical-lr: the text is placed vertically from left to right, reading from top to bottom.

Example: Using writing-mode

 p.test1 { 
  writing-mode: horizontal-tb; 
 } 
 
 p.test2 { 
  writing-mode: vertical-rl; 
 } 
 
 p.test3 { 
  writing-mode: vertical-lr; 
 } 

Results show:

Full code:

The writing-mode Property

writing-mode: horizontal-tb;

You can become a part of TipsMake.com by Submit articles, experience your technology to the content management team of the social network via email info@tipsmake.com or register an account and post directly on TipsMake.com.

writing-mode: vertical-rl;

You can become a part of TipsMake.com by Submit articles, experience your technology to the content management team of the social network via email info@tipsmake.com or register an account and post directly on TipsMake.com.

writing-mode: vertical-lr;

You can become a part of TipsMake.com by Submit articles, experience your technology to the content management team of the social network via email info@tipsmake.com or register an account and post directly on TipsMake.com.

Last lesson: Shadow effect in CSS

Next lesson: Using Web Font in CSS