Several ways to realize the newline code of the web front end!

The little friends who have just started the front-end must have encountered a situation where a whole paragraph of text needs to be displayed in a new line. In fact, there are several ways to achieve this. Xiaoqian will introduce you to several common ways today.

1. First of all, the first way is to add a "<br>" tag to the text that you want to wrap. You can add the code several times if you want to change a few lines.

3.png4.png

2. Use the <p>text</p> code, the paragraph text will automatically wrap, and you need to add the <p>code as many times as you need. Note that this code needs to have a closing item, which is the end of </p>, otherwise it will not take effect .

5.png

6.png

3. Through some editors, when you press the enter key, the editor will automatically add line break code for you, such as Dreamweaver and so on.

7.jpg

4. Use the CSS style sheet to control the word wrap, Chinese and English are not the same.

1)word-break:break-all. Only works for English, and uses letters as the basis for line breaks

2)word-wrap:break-word. It only works in English, with words as the basis for line breaks

3)white-space:pre-wrap. Only works for Chinese, compulsory line break

4) white-space: nowrap. Forced not to wrap, all works

5) white-space: nowrap; overflow: hidden; text-overflow: ellipsis; no line break, the excess part is hidden and appears in the form of an ellipsis.

Note that the attributes here need to set the width of the container, otherwise it will not take effect. And word-break is a proprietary attribute of IE5, students should remember.

8.jpg

This article is from Qianfeng Education , please indicate the source for reprinting.

Guess you like

Origin blog.51cto.com/15128702/2676094