CSS line breaks make your website more beautiful

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. (For example)

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)

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:

Li {display: inline}
A {padding: 0 1.2em}
Case Analysis: common lists are used for text layout. 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, 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, for example.

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, symptoms may occur when the width is inappropriate.

In addition, there are other solutions, such as the above [a] floating, so that 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.

In the next article, I am planning "CSS system layout and layout", which means that the layout is unified on the entire website level, not just for a single page.

Why is there a plan. Currently, many websites, especially CMS, are often created with insufficient page optimization, resulting in insufficient browsing speed. Many webmasters complain that the space speed is not good and they want to spend a lot of money to buy space. In fact, we can start with page optimization.