The overflow happens at the bottom of the container and the overflown text is colored differently. Note that the white-space property doesn’t affect all kinds of space, just the most frequent ones such as the regular horizontal single space, tab space, and line feeds.īelow, you can see a screenshot of a sample text that’s wrapped by the browser to fit inside its container. They also consider these space characters for wrapping opportunities (places where a text can be wrapped) when wrapping is needed.Īnd, it’s precisely these browser actions that we can control with white-space. Like this, there are plenty types of spaces that constitute “whitespace”.Īs I mentioned in the beginning, browsers collapse multiple spaces (both horizontal and vertical) in the source into a single space. Enter key adds a vertical space to start a new line, and in HTML adds a single unbreakable space to web pages. Tab key also adds a similar space but a with bigger length. Each space in the set varies from each other in length, direction, or both.Ī typical single horizontal space character is what we add by pressing the spacebar key. First of all, what is whitespace? It’s a set of space characters. However, the white-space property is about more than just wrapping. The nowrap value of white-space does exactly that. If you are familiar with the white-space CSS property I bet you came to first know it in the same fashion as many others while searching for a way to prevent the wrapping of text. The simplest way to force an extra break can be done by using the good old element. These places are all called soft wrap opportunities and when the browser does break the text at one such place, the break is called a soft wrap break. Soft wrap opportunities & soft wrap breaksīrowsers decide where to wrap an overflowing text depending on word boundaries, hyphens, syllables, punctuations, spaces and more. There are a fair number of CSS properties (and HTML elements!) that can control the wrapping and the breakpoints and also define how spaces and line breaks are processed before wrapping. A Mandarin news article and a French poem not necessarily need to be wrapped in the exact same way. Wrapping preferences might also change with the language and purpose of the text. It may also happen that we just desperately need those spaces preserved in our text, however the browser keeps combining them into one, forcing us to add multiple in the source code. It can be a headline that shouldn’t be wrapped or a word in a paragraph that better be broken than descend a line, leaving an odd-looking empty space at the end of the line. But, we can easily end up in circumstances where the default browser behaviour isn’t what we are looking for. Read Also: 15 Beautiful Text Effects Created with CSS When to change default text wrapping Other than wrapping, browsers also take care of the spaces they merge multiple consecutive spaces in the source code into one single space on the rendered page, and they also register forced line breaks before start working on the wrapping. Wrapping is something browsers do considering many factors, such as the language of the text or the placement of punctuation and spaces-they don’t just push down what doesn’t fit in the box defined for the text content. Browsers wrap text depending on the width of the text container and the width of the screen so that we can see all the text without having to scroll sideways much (only downwards). As much as impressive that is, it’s not something we really need while reading. Unlike paper, web pages can almost infinitely extend sideways.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |