CSS Wrapping Detail Tutorial

Wrapping lines for plain text paragraphs

Case Description: In practical applications we often encounter such a problem, is a paragraph of text, with a clear width, the need for text to automatically wrap. (pictured below)

Case study: The above two figures, no use of any typesetting CSS properties, is also by default, block elements in the text, to the edge will automatically wrap. But here is a special case: The contents are all English letters (no word sentence, no words and words between the space), at this time the text does not automatically wrap (see the figure below)

Special case: Sometimes you write the Dongdong, by default does not automatically wrap, this is mostly because you in other CSS property settings, inadvertently associated with that paragraph. For example, your P element accidentally has a white-space:nowrap

Line wrap for multiple lines of links or text

Figure Code above:

Li {display:inline}

A {padding:0 1.2em}

Case study: The above figure uses the common list to typesetting the text. Only need to set the display property of Li to line, you can achieve automatic line wrapping. But there's a little flaw in that. I do not know if you notice, the original label A has left and right padding, the second line is indeed the head display. Because this is a link is a branch, the display is correct, but the display effect is not perfect enough. Keep looking down.

There is a small flaw in the picture above, that is, the singer's name is branch, will give the visitor bring unpleasant feeling. At this point we need to look at each singer as a whole, and force the text in the whole do not change lines, but let this block of the whole line wrap, as shown below.

This looks beautiful past, how to do it, look at the code:

Li {display:inline; float:left}

a {padding:0 1.2em; display:block; White-space:nowrap}

Code Explanation: Display:inline intention is to eliminate IE6 double margin bug,white-space:nowrap Ignore all the space carriage return and other elements, the purpose is to force "text in the Block" does not change lines. If you do not force a newline, the following image symptom appears when the width is not appropriate.

In addition, there are other solutions, such as allowing the above "a" to float, so that its width becomes adaptive.

Summarize:

For the same effect, through CSS can have a lot of ways to achieve, in the end which is more excellent, need to accumulate long time experience.

The next article I'm planning "CSS system layout and typesetting" means to stand on the entire site, unified layout, not just for one page.

Why do you have this plan? Now a lot of stations, especially the CMS built, often page optimization is not enough, resulting in fast browsing speed. A lot of stationmaster complain space speed not, want to spend big price buy space. In fact, can be completely from the page optimization start.