CSSLine breaks make your pages look more beautiful. See the following figure.
Line feed of a common text section
Case study: in practical applications, we often encounter this problem, that is, a piece of text, with a clear width, requires text to wrap automatically. (As shown in the following figure)
Case study: the above two figures do not use any typographical CSS attributes, that is, by default, the text in the block element will automatically wrap when it reaches the edge. But here is a special case: the content is all English letters (no word sentences, no spaces between words), and the text will not automatically wrap (see the figure below)
Special case: sometimes you write something that doesn't automatically wrap by default. Most of the reason is that you accidentally associate it with other CSS attribute settings. For example, if your p element accidentally has white-space: nowrap
Line feed of multi-line links or text
Code above:
Li {display: inline}
A {padding: 0 1.2em}
Case Analysis: The preceding figure uses common lists to typeset text. You only need to set the Display attribute of li to the row to achieve automatic line feed. However, this is slightly flawed. I don't know if you have noticed that label a has left and right padding, and the second line is displayed as the top header. Because this is a link that has been broken down, the display is correct, but the display effect is not perfect. Continue to look down
There is a flaw in the figure above, that is, the singer's name is broken down, which will bring unpleasant feelings to the viewers. At this time, we need to regard every singer as a whole, and force the text to not wrap in this whole, but to make the overall automatic line feed of this block, as shown in the figure below.
This looks beautiful. How can we do it? Let's look at the code:
Li {display: inline; float: left}
A {padding: 0 1.2em; display: block; white-space: nowrap}
Code explanation: display: inline aims to eliminate the IE6 double margin bug. white-space: nowrap ignores all elements such as space carriage return, so as to force "text in this block" not to wrap. If you do not force a line break, the following symptoms will appear when the width is not appropriate.
In addition, there are other solutions, suchFloatingIn this way, its width becomes adaptive.
Summary:
For the same effect, there are many implementation methods through CSS. Which of the following is better? It takes a long time to accumulate experience.
Next, I amPlanning"CSS systemLayoutAnd typographical layout, which means to unify the layout of the entire website, not just for a page.
