css overflow and overflow-wrap

CSS overflow and overflow-wrap seem easy to understand, but I find no document gives you clear explanation. I mean you can understand their definition by reading those document, but only after hands-on practice can you really understand the behavior of the two css properties.

First, a line in html will not wrap automatically as you see in most webpages(such as this one). If a line is too long(longer than the width of the container), how is it displayed? That is when css overflow plays its role. When overflow:hidden, the part of the line that is outside the container is not displayed. When overflow:scroll, a scroll bar is shown at the bottom of this container and you can drag the scroll bar to see all parts of the line. Overflow:auto is almost the same as overflow:scroll. Overflow:visible(the default) will show the part of the line that’s beyond the container, outside the container, which may be overlaid on other elements. Then the part of the line that is beyond the container will be shown subject to the overflow property of the container of the container. Note that overflow is not an inheritable property, which means the child element won’t inherit the parent overflow property automatically. But if the line is so long as to extend beyond the whole webpage, how is the displayed？ At this time, overflow:visible is equal to applying overflow:scroll to <body>, i.e., a scroll-bar will appear at the bottom of the webpage for you to see the whole line.

Although we can use overflow:scroll to show a complete line in its container, in most cases, we see a long line is wrapped to multiple lines in the container. This is implemented by the overflow-wrap property. Now a long line(no space between the characters in the line) can be wrapped to multiple lines with overflow-wrap: break-word or overflow-wrap:anywhere. The default value of overflow-wrap is normal, which means if the line has spaces within it, it still has opportunities to break into several lines in current container, even you do not add the overflow-wrap to the container element, making it possible to show as much content as possible in the container. But if a part of the line has no space within it and the part is very long, it is still overflow and how to display the overflowed content is under the control of the overflow property.

Did you like this?
Tip admin with Cryptocurrency