Portable External Computer Monitor

Cut a word in a blog title or snippet is a surefire way that template designers use to enhance the look of their blog. 

There are two ways you can cut out words in the title of an article and so on. The first you can use text-overflow: ellipsis and the second you can use line-clamp

Between the two alternatives above have their respective functions, 

text-overflow: ellipsis serves to cut a word on only one line. While line-clamp serves to cut the word more than one line, pay attention to the full explanation below.

Cut Words with text-overflow: ellipsis

As I explained above, this first alternative is useful for cutting words in 1 line.

text-overflow: ellipsis is required to use two attributes, overflow-hidden and white-space: nowrap

For the full CSS as below

.box {


  text-overflow: ellipsis;


  /* There must be a walk */


  overflow: hidden;


  white-space: nowrap;


}

For a demo see below.

This is an example of ellipsis text, ...

Cut Words with line-clamp

If you want to cut a word on the title but on a few lines. Please use line-clamp

for example css must be as below:

.box {


  display: -webkit-box;


  -webkit-line-clamp: 3;


  -webkit-box-orient: vertical;  


  overflow: hidden;


}

Change webkit-line-clamp: 3 according to the number of lines you want.

For a demo see below.

This is an example of line-

clamp text, and will be truncated 

when more than 3. line. Tr...

Note: text-overflow: ellipsis and line-clamp already support all browsers, except internet explorer.

Okay, I think up here used to be a little tutorial from me on how to shorten the word on the title or blog snippet. Hopefully useful for you.

www.thisgio.eu.org