Guide: How to Edit Default Text Wrapping using HTML and CSS
Unlike paper, web pages can extend sideways almost infinitelyImpressive as it is, it’s not something we really need while reading. Browsers wrap text depending on the width of the text container and the width of the screen so we can see all the text without having to scroll much sideways (only down). Packing up is something browsers do, taking into account many factors, such as the language of the text or the placement of punctuation and spaces – they don’t just push down which does not fit in the box defined for the text content. Besides packing, also browsers take care of the spacesThey merge multiple consecutive spaces in the source code into a single space on the rendered page, and they also register forced line breaks before starting wrapping.
When the default text wrap needs to be changed
That’s all great, and much appreciated. But we can easily end up in circumstances where the default browser behavior is not what we are looking for. That could be a cup must not be packed or a word in a paragraph that better to be broken than to descend a lineand leave a strange looking empty space at the end of the line. It can also happen that we are just desperate need those spaces that are kept in our texthowever, the browser always combines them into one, forcing us to create multiple & nbsp; in the source code. Packing preferences are also possible change with the language and purpose of the textA Mandarin news article and a French poem don’t necessarily have to be packaged in exactly the same way. There are quite a few CSS properties (and HTML elements!) That can control over packaging and breakpoints and also define how spaces and line breaks are handled before wrapping
Soft wrap opportunities & soft wrap breaks
Browsers decide where to wrap an overflowing text depending on word boundaries, hyphens, syllables, punctuation marks, spaces and moreThese places are all mentioned soft wrap opportunities and when the browser breaks the text in such a place, the pause becomes one soft wrap break The easiest way to force an extra break can be done by the good old element to use.
White space
If you are familiar with the white-space CSS property, I bet you first got to know it in the same way as many others; while looking for a way to prevent text wrappingThe nowrap value of whitespace does just that. However, the whitespace property is about more than just wrapping. First of all, what is whitespace? It is a set of space charactersAny space in the set differ from each other in length, direction or both. A typical single horizontal space is what we add by pressing the space bar. Tab key also adds a comparable space but one with greater lengthEnter key adds one vertical space to start a new line, and & nbsp; in HTML adds a some unbreakable space to web pages. In this way, there are many kinds of spaces that make up “whitespace”. As I said at the beginning, browsers collapse multiple spaces (both horizontal and vertical) in the source in one room. She also consider these space characters for wrapping options (places where a text can be wrapped) when packing is needed. And it is precisely these browser actions that we can control with white space. Note that the white space property does not affect all types of space, only the most common like the normal horizontal single space, tab space and line feeds. Below is a screenshot of sample text that packed by the browser to fit in the containerThe overflow happens at the bottom of the container and the overflow text is colored differently. You will love the collapse of successive spaces in the code.
.textContainer {width: 500px; height: 320px;} Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. Ã ¢ Â ?? A ?? Hey. After applying whitespace: nowrap; line changes the wrapping of the text in the following way: .textContainer {/ *… * / white-space: nowrap;}
The value of whitespace preserves all whitespaces and prevents wrapping of the text .textContainer {/ *… * / white-space: pre;}
The pre-wrap value of whitespace preserves all whitespaces and envelops the text .textContainer {/ *… * / whitespace: pre-wrap
Finally, the pre-line value of white space preserves vertical whitespaces like new rules and envelops the text .textContainer {/ *… * / white-space: pre-line;}
Word breaks
Another important CSS property to know for managing text wrap is word break. You can see in all the screenshots above that the browser wrapped the text before the word “hello” on the right, behind which the text overflowedThe browser did not break the word However, if you have to allows breaking letters in a word so that the text looks even on the right, use the break-all value for the word-break property: .textContainer {/ *… * / word-break: break-all;}
The word-break property has a third value in addition to break-all and normal (associated with the standard line break). The keep-all value does not allow breaking words You may not see the effect of keep-all in English. But in languages where there are letters in a word meaningful units in themselves, the browser can words when packing, and this can be avoided with keep-all. For example the letters in Korean words, initially broken for packing, are held together when the whitespace: keep all; rule is specified.
.textContainer {/ *… * / word-break: keep-all;}
This property may support another value called break-word in the future. You will see how break-word works later, in the “Overflow wrapSection of this article.
Opportunities to break words
Developers can too add wrap opportunities within words, using it HTML element. If a browser needs it wrap a text string it will consider the place where is present for a wrapping option.
.textContainer {/ *… * / whitespace: pre-wrap à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey. à ¢  ?? A ?? Hey.
Without the whole word “Hello” would have appeared on a new line. By To add to the HTML code, we let the browser know it’s okay to break the word at that point before packing, just in case needed.
Hyphens
The hyphenated CSS property is another way to check pauses between letters in a word. We have a separate article on CSS hyphenation if you’re interested. In short, the house allows you create wrapping capabilities through hyphenation The automatic value prompts the browser automatic break and abort words where appropriate during packing. The manual value forces browsers to wrap (if necessary) with hyphenation options added by us, such as the hyphen (& hyphen;) or & shy; (soft hyphen). If no value was given, it would be there no wrapping near hyphens
.textContainer {/ *… * / – webkit hyphens: auto; -ms hyphens: auto; hyphens: auto;}
Overflow wrap
The overflowwrap CSS property determines whether a browser may break words (or saved spaces, which may be supported in the near future) on landingWhen the break word value is given for overflowwrap, the word will be disconnected in case of no other soft wrap opportunities are found in a line. Note that overflowwrap is also known as word-wrap (they are aliases).
.textContainer {/ *… * / overflow-wrap: break-word;}
With no space between the letters in the HTML code above (so no wrapping option), the text was initially not packaged and was kept as a single word When the consent was given to wrap break through the text words (i.e. the value of the break word is given to overflowwrap), the wrapping was done by breaking the whole string where it was needed.
How to Edit Default Text Wrapping using HTML and CSS: benefits
Faq
Final note
I hope you like the guide How to Edit Default Text Wrapping using HTML and CSS. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Edit Default Text Wrapping using HTML and CSS, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Edit Default Text Wrapping using HTML and CSS”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Edit Default Text Wrapping using HTML and CSS, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
