Web Front-end
CSS Tutorial
The difference between word-wrap and word-break in CSS text wrapping
The difference between word-wrap and word-break in CSS text wrapping
At work, we often encounter situations where we need to wrap text. There are many ways to wrap text, such as: word-wrap, word-break. Many people will wonder what these two things are. Aren’t they both line breaks? ,what differences are there? There are also many people who are confused and can only memorize word-wrap: break-word; word-break: break-all to force sentence breaks. So today I will talk to you about the difference between word-wrap and word-break.
The difference between word-wrap and word-break
Word-break: break-all and word-wrap: break-word are both written in English sentences Wrap if parent width is not enough. Both properties are used to wrap text, but there are subtle differences. Most of the time, when you first come into contact with these two properties, you will not be able to tell the difference.
Difference:
word-wrap: break-wordThe function is to force the text to wrap. Under normal circumstances, when the width of the parent is not enough, regardless of whether the English word is automatically wrapped, when a whole word is not enough, the whole word is wrapped to the next line. It seems to be a very reasonable way of writing, but in some cases, unexpected problems may occur. Condition. That is, when the length of an English word exceeds the length of the parent container, the English word will still display the entire word and exceed the scope of the container.
Another situation is that when a word is very long, the word will wrap automatically, which will also leave a lot of space on the previous line. In this case, IE created a new attribute, word-break:break-allIt forces text to wrap, regardless of whether a sentence is a whole word when it reaches the width of the parent container, it will force Line breaks break words into sentences. If a word exceeds the width of the parent container, the word breaks and breaks into new lines.
Example
1. Without giving him any style, you can see that the super long word has overflowed the parent container
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width: 200px;border: 1px solid #000;}
</style>
</head>
<body>
<div>看看这一句话：This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>
</body>
</html>Effect Picture:
2. Now we add word-wrap: break-word to it. You will find that the extra long word will display the excess part on the next line.
word-wrap: break-word;
Rendering:
3. Next, we add word-break: break-all to it. You will find that it Fill in all the blank parts above.
word-break: break-all;
Rendering:
The above mainly introduces the usage of word-wrap: break-word and word-break: break-all, as well as word- If you don’t understand the difference between wrap and word-break by reading the text, you can compare them with examples and pictures to see the difference.
The above is the detailed content of The difference between word-wrap and word-break in CSS text wrapping. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?
Apr 05, 2025 pm 05:51 PM
Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
How to Use CSS Grid for Sticky Headers and Footers
Apr 02, 2025 pm 06:29 PM
CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there's a bit of a learning curve, but Grid is
