Several tips for dealing with text

Through the CSS can have a good effect on the text. The following is a simple collation of several word processing techniques. Continuously updated.

First, text overflow: text-overflow

The basic specifications are as follows:

1{2  display: block; /* Must be a block-level element */3  white-space: nowrap;  /* No Line break */4  text-overflow: ellipsis;  /* Use ellipsis for overflow */5  overflow: hidden;　　/* Do not allow scroll bars */6  width: 100px; /* You must specify a width to know where to truncate the text */78 }

Of course, when you are compatible with older versions of opera don't forget to add prefixes:

-o-text-overflow:ellipsis;

For overflow text, we can also have other processing options:

{   text-overflow:ellipsis;   /* use ellipses to represent overflow */ ;   text-overflow:clip;   /* truncate overflow text */    text-overflow:string;   /* Specify a string to replace the overflow part */ }

Second, the text sub-column: Column-count, Column-gap, Column-rule

We can often see the kind of column layout in the newspaper, in fact, in CSS3 also provides the text to display multiple columns of the properties:

{  -moz-column-count: 3;   -webkit-column-count: 3;   column-count: 3;   -moz-column-gap: 30px;   -webkit-column-gap: 30px;   column-gap: 30px;   -moz-column-rule: 1px dashed black;   -webkit-column-rule: 1px dashed black;   column-rule: 1px dashed black;}

A few tips for working with text