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:

1. text-overflow
2. word-wrap
3. word-break
4. 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:

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

The two attributes that come with text-overflow are:

1. white-space: nowrap;
2. 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:

Some properties to handle Text in CSS Picture 1

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

Some properties to handle Text in CSS Picture 2

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:

1. normal: display by default, long words may be spilled out of the box (default)
2. 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:

Some properties to handle Text in CSS Picture 3

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:

1. normal: display by default, long words may be spilled out of the box (default)
2. 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.
3. 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.
4. 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 usually used only for numbers (if any).

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

Some properties to handle Text in CSS Picture 4

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 are used to style text that is placed horizontally or vertically.

Values ​​of writing-mode:

1. horizontal-tb: the text will be placed horizontally from left to right, reading from top to bottom (default).
2. vertical-rl: the text is placed vertically from right to left, reading from top to bottom.
3. 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:

Some properties to handle Text in CSS Picture 5

Some properties to handle Text in CSS Picture 6 Some properties to handle Text in CSS Picture 7

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@meta.vn 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@meta.vn 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@meta.vn or register an account
and post directly on TipsMake.com.

Last lesson: Shadow effect in CSS

Next lesson: Using Web Font in CSS