Talk about text wrapping in CSS

This is the 28th day of my participation in Gwen Challenge

preface

The story started with a false bug discovered by the test, which said that after configuring the bulletin, there was too much text and no newline, but it spilled Windows. How is that possible? When I test myself, but clearly there is no problem, how to test there is a problem? It must be the test.

Results test sent a screenshot, I have to laugh, at least copy some text ah, this full screen AAAAA… What kind of announcement?

I then told the test that no bulletin looked like this, and that this would not normally happen. Because the browser interprets the string of letters as a word, how can the word be wrapped in the middle? Just like a Chinese character, how can it be displayed in two halves from the middle? There is no such a long word, please do not disorderly test ~ test said not to exclude this extreme situation (in fact, there is no good), and before his cooperation on the front end can deal with, bala Bala……

Well, change it, in fact, is not a line of CSS code problem! After the change, we will talk about line breaks in CSS

White-space handles whitespace in elements

For example, white-space: nowrap is used when a line of text overruns the ellipsis. To disable text wrapping. What many people don’t know is that the white-space attribute is mostly used to handle whitespace in elements.

The white-space property values are as follows:

The normal default. Whitespace is ignored by the browser.

Pre text is not wrapped and white space is preserved by the browser. The behavior is similar to that in HTML

The label. You can stop writing and still have space.

Nowrap text does not wrap, and the text continues on the same line until the tag is encountered.

The pre-wrap text is wrapped, preserving the whitespace sequence.

The pre-line text is wrapped, merging whitespace sequences.

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

Of these, it is worth mentioning the pre and pre-wrap attributes, both of which retain white space in the text, but from a line wrap perspective: one line wrap, one non-line wrap. Let’s write some code to actually test it:

    <style>
        .box{
            width: 288px;
            height: 300px;
            border: 2px solid # 333;
        }
        p:nth-child(1) {white-space: pre;
        }
        p:nth-child(2) {white-space: pre-wrap;
        }
    </style>


    <div class="box">
        <p>Hello, everyone, I am the Antarctic ice cube, welcome you to read my blog, if you like, please click a like, follow me, together to learn more fun front-end knowledge!</p>
        <p>Hello, everyone, I am the Antarctic ice cube, welcome you to read my blog, if you like, please click a like, follow me, together to learn more fun front-end knowledge!</p>
    </div>
Copy the code

The operation effect is shown as follows:

As you can see, the white-space attribute is quite powerful, and preserving white space in text can sometimes do wonders

Text-wrap Specifies the rule for wrapping text

The text-wrap attribute values are as follows:

Normal does line breaks only at the allowed line breaks.

None does not break a line. Text that cannot be contained by the element overflows.

Unrestricted newlines between any two characters.

Suppress a newline in a compressed element. The browser only wraps lines when there are no other valid newline points in the line.

Again, let’s see in code:

    <style>
        .box{
            width: 288px;
            height: 300px;
            border: 2px solid # 333;
        }
        p:nth-child(1){
            text-wrap: normal;
        }
        p:nth-child(2){
            text-wrap: none;
        }
        p:nth-child(3){
            text-wrap: unrestricted;
        }
        p:nth-child(4){
            text-wrap: suppress;
        }
    </style>


    <div class="box">
        <p>Hello, everyone, I am the Antarctic ice cube, welcome you to read my blog, if you like, please click a like, follow me, together to learn more fun front-end knowledge!</p>
        <p>Hello, everyone, I am the Antarctic ice cube, welcome you to read my blog, if you like, please click a like, follow me, together to learn more fun front-end knowledge!</p>
        <p>Hello, everyone, I am the Antarctic ice cube, welcome you to read my blog, if you like, please click a like, follow me, together to learn more fun front-end knowledge!</p>
        <p>Hello, everyone, I am the Antarctic ice cube, welcome you to read my blog, if you like, please click a like, follow me, together to learn more fun front-end knowledge!</p>
    </div>
Copy the code

The operation effect is shown as follows:

You must be wondering, why do they all look the same? That’s because text-wrap is obsolete! I’ve always thought it would work, why

Word-break Line breaking rule for non-Chinese, Japanese and Korean text

Word-break is mainly aimed at the text of alphabetic words, which has little meaning for the use of Chinese.

The word-break property values are as follows:

Normal uses the browser’s default line breaking rules

Break-all allows line breaks within words

Keep-all can only be wrapped at half-corner Spaces or hyphens

Word-wrap: break-word; word-wrap: break-word; Word-break: break-all; word-break: break-all; More violent, the rest of the space is lined up, lined up to the edge of the box, no longer lined up, immediately cut off the whole word from this place. The word – wrap: break – word; It starts on another line, and if it still doesn’t fit, it cuts it off.

Take a look at the code:

    <style>
        .box{
            width: 288px;
            height: 300px;
            border: 2px solid # 333;
        }
        p:nth-child(1) {word-break: break-all;
            background-color: rgb(255.176.176);
        }
        p:nth-child(2) {word-wrap: break-word;
            background-color: rgb(176.188.255);
        }
    </style>


    <div class="box">
        <p>From tomorrow on, langlanglanglanglanglanglanglanglanglanglanglanglanglanglanglanglanglang I will be a happy person; Grooming, chopping, and traveling all over the world. From tomorrow on, I will care foodstuff and vegetables, I have a house,towards the sea, with spring flowers blossoming.</p>
        <p>From tomorrow on, langlanglanglanglanglanglanglanglanglanglanglanglanglanglanglanglanglang I will be a happy person; Grooming, chopping, and traveling all over the world. From tomorrow on, I will care foodstuff and vegetables, I have a house,towards the sea, with spring flowers blossoming.</p>
    </div>
Copy the code

The operation effect is shown as follows:

Word-wrap Wrap long words

In the foreword example, we can use word-wrap: break-word to achieve line breaks. The purpose of this is to be less violent and to make long words appear as fully as possible. The word-wrap attribute values are as follows:

Normal only breaks lines at allowed hyphenation points (the browser keeps default processing)

Break -word allows line breaks to be truncated inside long words or URLS

word-wrap: break-word; I will not write it here because I have illustrated it above.

Finally, by the way,

is also a newline tag, and it’s worth noting that it starts a new line, not a paragraph.

Afterword.

Although I worked overtime very late today, I still worked hard to finish the paper and stayed late into the night. Somehow, I think of Haizi’s “Facing the sea, with spring blossoms”, excerpted as follows, for you who are also working hard:

From tomorrow on, I will be a happy man feeding horses, chopping wood and traveling around the world. From tomorrow on, I will care about food and vegetables. I have a house facing the sea with spring flowers. And every family correspondence tell them my happiness that happiness lightning told me I will tell everyone to give every river every mountain a warm name wish you have a bright future wish you have your lover married wish you happiness in the earth I only wish to face the sea, spring flowers

Today is the twenty-eighth day that I insist on daily more, output a little bit every day, progress a little bit. Day arch a pawn, work does not donate tang. Everybody also wants to refuel together ~

If this article has helped you, don’t keep it a secret! For example, click “like”, follow Big Ice cube, and learn more interesting technology blogs with Big Ice Cube

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

preface

White-space handles whitespace in elements

Text-wrap Specifies the rule for wrapping text

Word-break Line breaking rule for non-Chinese, Japanese and Korean text

Word-wrap Wrap long words

Afterword.

More challenging articles are listed below:

Talk about text wrapping in CSS

preface

White-space handles whitespace in elements

Text-wrap Specifies the rule for wrapping text

Word-break Line breaking rule for non-Chinese, Japanese and Korean text

Word-wrap Wrap long words

Afterword.

More challenging articles are listed below:

Related Posts

For HTTP caching, see this article and you can build a base

120 lines of code for pure Web clip video

Super useful Git branch management