Effective displays or layouts from text and word wrapping
Wrapping property from CSS3 are the design properties for display or layout of content within a website. Wrapping properties when not included affect users such that they cannot include a long line of design overflowing outside windows boundaries. CSS3 has included ability to handle text on webpage using text wrap, word wrap and many other features. We would discuss the properties for wrapping from CSS3 in detail.
Text wrapping for effective wrapping of content includes four values that the wrap can take – Normal, Unrestricted, Suppress and None. Normal value for the text wrap mode denotes that breaking of lines is allowed at the given break points only. Unrestricted value is taken when it denotes that the line breaking is done from only two grapheme clusters (end user perceived characters). The final outcome from line breaking is that the character shaping has effect of no breaking. Suppress is the value taken by text wrap mode where line breaking is suppressed within the element. None value is where the lines do not break any text that doesn’t fit with the boundary, and eventually gets overflowed.
Word wrapping is for the users to define break within the word and thereby prevent overflowing from a word, in case the string is too long to fit inside a text box. This property of wrapping comes into being only when value is either normal or break word. Normal value for word wrap mode provides a line break only when these are defined and also only allowed for break points. The break word value is only where the word wrap mode causes an unbreakable term to break and when there is no acceptable break point in the line. This is designed in a way that the final character shaping gives the effect of word not being broken.
Text overflows is another wrapping feature that is included with CSS3. Text overflow feature explains the user through visual hint about text clipping. Some text is effectively clipped or cut before it is wrapped to next line of fixed width box also called the rendering box. This happens when elements might go outside of an element’s rendering box and the values of clip or ellipsis provide details for text that remains visible. The feature takes two values either clip or ellipsis. Clip value is taken where the text is cut off and the remainder portion is invisible. The clip includes order to take effect, where text must be inside element and would not allow natural line breaking. By default is available in all browsers. Ellipsis is the value when text is cut off and the incompleteness is indicated by the feature. Browser support is good for this property from Internet explorer, fire fox,chrome, safari also.
Hyphens wrapping feature for the CSS3 indicates property whether or not there is an automatic hyphen included. This property takes the three values – None, Manual and Auto. None value is included for browser to never hyphenate even though a break point is being defined. Manual value is default and does not hyphenate unless hyphenation characters are indicated. Auto value is one where the browser automatically includes or inserts word breaks or hyphenations with language for the page.
A new property for wrapping also called as Overflow wrap is effective in emergency wrapping. Given the text wrap is set to None, this property might have no effect. From the line breaking in the middle of word, the word is not hyphenated. Line break and Word break are the two properties also introduced for dealing with problems or issues that might arise from browsers assuming that the lines or words to break are common for English language.
Conclusion
CSS3 wrapping from a number of included wrap properties and features are providing graphic layout and displays that are simple and good in design. These layout designs from CSS3 employ effective features for line breaks and overflow.
