Shulou(Shulou.com)06/01 Report--

Editor to share with you the example analysis of line wrapping and line wrapping attributes in web development. I believe most people don't know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

About line wrapping and newline properties

As for the white-space attribute of CSS, I think most people should be similar to me. The most commonly used attribute is nowrap, which is most often used when displaying extra-long ellipses. [hiahiahia~]

The cause is like this: the product doggie has planned a New Year's Day event, and the bottom of the event home page needs to show the configured activity rules. Note, it is the configured activity rules. Therefore, it is inevitable that the operator sister has to configure an activity rule in the background, and she certainly does not expect them to configure the html text, right? so they configure it like this:

1, the cushion Sophie room is all Clough; 2, the other side Safin's brush score is enlarged; 3, the powder is sent.

So, when you get the data, the hidden newline character will inevitably be taken away and gone, and it becomes a real newline character. As seen in the word document.

As a result, the page rendering and DOM structure looks like this.

Obviously, this is not what we really want it to show, of course we want it to be smart enough to change lines when it's time to change lines, right? so the question is, why doesn't it change lines?

Newline character

There are four kinds of newline characters that Awang can remember in his head.

\ n: the first contact\ n is when learning C language line feeds, which is defined as: after typing one line, the cursor moves to the beginning of the next line.

\ r\ n: enter line feed (enter: enter is to reset the horizontal position, line feed: line feed is to go to the next line, without changing the horizontal position. You can imagine that when you click the enter key in the word document, you actually perform the operation of enter + line feed)

This newline character is the only newline tag recognized by HTML

Soft enter tag for word documents

Of course, in addition to these, different languages may have their own line breaks, such as the space + underscore in C++ 's endl,VB

Baidu encyclopedia shows that word newline is a newline symbol, and its function is to display newline, but it is not a real paragraph mark, and its newline is not a new paragraph in the real sense, so the text separated by newline is still in a paragraph. All the operations based on paragraph in word will not recognize the newline as the end of the paragraph, plus in HTML. You can only recognize br tags to do basic text wrapping, so that's why the word soft carriage return newline character doesn't display correctly in HTML.

Line feeds in HTML

In HTML, there are several ways to wrap a line

Block-level element wrapping

There is no more explanation for this. The most basic definition of block-level elements is that they generally start with a new line, and adjacent block-level elements will be displayed in different rows, default to their line wrapping behavior.

Br tag

Br is the default and only recognizable newline element in HTML. Just add it where you want to wrap it. It is a self-closing tag.

Pre tag

Come on, explain that br is the default and only recognizable newline element in HTML, and why there is a pre tag all of a sudden!

The pre element can define preformatted text, and the text surrounded by the pre element usually retains spaces and newline characters, and the text is rendered as an equal width font, so it is not because it is recognized as a newline element that leads to line feeds, but because it retains the original format of the text node, what you give me and what I give you, instead of like other elements, you fill me with newline text. I'll give you the slim version of the text that I compressed and re-compressed.

Friendly tip: it can not only retain the newline format, but also retain your multiple spaces, because the pre element defaults to the style white-space: pre

Take a chestnut.

1, the mattress Sophie room is Clough; 2, the other side Safin's brush score is enlarged; 3, the powder send / / display 1, the sealing mattress Sophie room is all Clough; 2, the other Safin brush score is enlarged; 3, the powder mailing 1, the sealing mattress Sophie room is all Clough 2. enlarge the brush score of the other Safin; 3, the powder send / / display 1, the sealed Sophie room is Clough; 2, the brush score of the other Safin is enlarged; 3, the powder send

In view of the ignorance of pre tags, when Awang was still doing JSP, the demand for such line breaks was usually regular expressions to convert line breaks into br tags, and then rendered into line-feed DOM nodes through HTML (vue's v-html), which is believed to be the first choice for most people.

'My string 1\ r\ n\ r\ nMy string 2\ r\ n111'.replace (/\ r\ nzag,'')

Now come to think of it, those seniors taught the same method. It is estimated that they did not expect that a single line of CSS code could solve it.

CSS property wrapping

Let's assume that there is a very long text node: "ha, congratulations". Let's assume that there is a container long enough to hold only "ha, con".

Word-break

The word-break attribute specifies the handling method of automatic line wrapping, which allows browsers to wrap lines at any location. It is a new attribute introduced by CSS3 (with compatibility issues), which is used to indicate how to break sentences within words.

What do you mean by broken sentences in a word? To put it simply, an intra-word sentence is generated when the text node ", congratulations" is displayed as ", con [suppose there is a new line here] gratulations" in the container. By default, the browser will display "ha, congratulations" in the container as "ha, [suppose there is a new line here] congratulations", that is, if there is a word so long that there is no room for it, the browser will move the word to the next line.

Word-break has a total of three attribute values

Default line wrapping rules for normal browsers

"ha, congratulations" will be displayed in the container as "ha, [suppose there is a new line here] congratulations"

Break-all allows line wrapping within words (the word refers to non-CJK (CJK refers to Chinese / Japanese / Korean) text)

"ha, congratulations" will be displayed in the container as "ha, con [suppose there is a new line here] gratulations"

Keep-all can only wrap lines at half-width spaces or hyphens

The CJK text continues to line, and the Non-CJK text behaves like normal

Word-wrap

The word-wrap attribute allows long words or URL addresses to wrap to the next line

Word-break has two attribute values in total

Normal only wraps lines at allowed hyphenation points (browsers keep default handling)

Break-word wraps lines inside long words or URL addresses

So what's the difference between it and word-break?

First of all, let's take a look at our prerequisite: there is a super-long text node: "ha, congratulations". We assume that there is a container that can only hold "ha, con", which means that when the word-break and word-wrap attributes are not added, the text node is displayed in the container as "ha, [suppose there is a new line here] congratulations", and the word congratulations must have rushed out of the container boundary, which is super ugly. At this point, word-wrap can come in handy. After adding word-wrap: break-word to the text, the text node will be displayed as "ha, [suppose there is a new line here] congratula [suppose there is a new line here] tions". In this way, in order to prevent long words from overflowing, the sentence is broken inside it.

So if you have word-wrap, why should you have the word-break attribute? To put it simply, when we set word-break:break-all; word-wrap:break-word, our super-long text ", congratulations" will be displayed as ", con [suppose there is a new line here] gratulatio [suppose there is a new line here] ns", and its purpose is to save space! Yes, you read it right!

Word-wrap is used to determine whether to allow sentence breakage within a word, and if not, long words will overflow. The most important point is that it will first try to move to the next line to see if the width of the next line is wide enough, and if not, it will break the sentence within the word.

On the other hand, word-break:break-all is even more rude, directly carrying out the broken sentences within the words.

White-space

The white-space attribute sets how to handle white space within an element, which declares how to handle white space in an element during layout establishment, and actually handles list overflow, line feeds and text overflows.

Blank character

Blank characters refer to characters that will not be displayed on the screen (such as spaces, tabs tab, carriage returns, line feeds, etc.). By default, HTML has combined all white space into one space.

White-space has a total of five attribute values

By default in normal, white space characters are ignored by browsers.

Multiple spaces are merged into one space, newline characters are ignored, and line feeds are self-adjusted within the width of the container.

Pre whitespace is retained by the browser and behaves like the pre tag in HTML

Multiple spaces are reserved, line breaks are retained, and line feeds are not self-adjusted within the width of the container until a br tag is encountered

Nowrap text will not wrap, and the text will continue on the same line until it encounters a br tag

Multiple spaces are merged into one space, the newline character is ignored, and the newline is not self-adjusted within the container width, which is different from the default behavior.

Pre-wrap preserves white space sequences, but wraps lines normally

Multiple spaces are retained, line breaks are retained, and line feeds are self-adjusted within the width of the container.

Pre-line merges white space sequences, but retains newline characters

Multiple spaces are merged into one space, newline characters are retained, and line breaks are self-adjusted within the width of the container.

Inherit specifies that the value of the white-space attribute should be inherited from the parent element

Above, you can choose the attribute value you want according to the actual situation.

In addition: if you want to add a hyphen at the newline and display the congratulations newline as con-gratulatio-ns, you can use the attribute hyphens:auto; to automatically insert the hyphen newline at the appropriate position

The above is all the contents of the article "sample analysis of line wrapping and line wrapping attributes in web development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.