Word-wrap and overflow-wrap CSS properties For example, setting the value of white-space CSS property to nowrap will disable wrapping.įorce line breaks are caused by explicit line-breaking controls or line breaks marking the end or start of blocks of text. For wrapping to occur at a soft wrap opportunity, you need to make sure you’ve enabled wrapping. What is the difference between a soft wrap break and a force line break?Īny text wrap that occurs at a soft wrap opportunity is referred to as a soft wrap break. The default wrapping at soft wrap opportunities may not be sufficient if you are dealing with long, continuous text, such as URLs or user-generated content, which you have very little or no control over.īefore we go into a detailed explanation of these CSS properties, let us look at the differences between soft wrap break and forced line break in the section below.
![css table cell text overflow ellipsis css table cell text overflow ellipsis](https://i.stack.imgur.com/udfIJ.png)
This article will focus mainly on the English language writing system. The value of the lang attribute you specify on the html element is mostly used to determine which language system is in use.
![css table cell text overflow ellipsis css table cell text overflow ellipsis](https://i.stack.imgur.com/cBoKH.png)
Some languages do not use spaces to separate words, meaning that content wrapping depends on the language or writing system. Though soft wraps occur in space characters in English texts, the situation might be different for non-English writing systems. Because words are bound by spaces and punctuation, that is where soft wraps occur. In English and most similar writing systems, soft wrap opportunities occur by default at word boundaries in the absence of hyphenation. A browser will wrap content at a soft wrap opportunity, if one exists, to minimize content overflow. How does content wrapping occur in browsers?īrowsers and other user agents perform content wrapping at allowed breakpoints, referred to as “soft wrap” opportunities. This article is an in-depth tutorial on the word-wrap, overflow-wrap, and word-break CSS properties and how you can use them to prevent content overflow from ruining your nicely styled layout.īefore we get started, let us understand how browsers wrap content in the next section. You can use the word-wrap, overflow-wrap, or word-break CSS properties to wrap or break words that would otherwise overflow their container. Using word-wrap, overflow-wrap, and word-break CSS properties Therefore, you need to apply styling to prevent content from overflowing their container. Content overflow can occur when you are dealing with user-generated content you have no control over, such as the comments section of a blog post.
![css table cell text overflow ellipsis css table cell text overflow ellipsis](https://i.stack.imgur.com/gbAXF.png)
Unfortunately, despite your best efforts to do so, you may still end up with broken layouts.īroken layouts sometimes happen because certain words are too long to fit in their container. Making a site responsive so that it displays correctly on all devices is very important in this day and age. Joseph Mawa Follow A very passionate open source contributor and technical writer A complete guide to word-wrap, overflow-wrap, and word-break in CSS