HTML5 Word-Wrap Feature
Introduction
Word-Wrapping allows the words to break between lines. If the end of the line is reached, the word will break at that point and continue on to the next line.
Another way to use word-wrap is to allow the words to break at the white spaces between the words so that no word is cut but rather kept together.
In WOW, this can come handy when the details are desired to be displayed on a single page view without having to scroll to the right to see the rest of the information. This can keep all the information in a vertical format. Scrolling will then only be vertical and not horizontal and vertical.
For example: Let’s say the cell will only read 10 characters per line and if there’s a cell that displays the company name such as: “Party Rentals Plus”, this name will be too long for that cell. On the first line it will display:
first line: → Party Rent
second line: → als Plus
This is how it will break words for each line, if it needs to do so.
Click here to view a sample of this in an Operation.
Creating an Operation using the Word-Wrap feature
Step 1:
A) create an Operation.
set up an Operation using any query.
example:
B) create Field Descriptors for the Operation. (If necessary)
choose the desired field for the word-wrap.
go into the Field Descriptor for that field.
example:
go to the Display Component property settings and set this property to: HTML5-Meter
click the Apply button next to the Display Component property.
example:
a textbox will appear. clear out the entire textbox and insert one of the options below:
example:
Option A:
Input the following for words to break at the white spaces between words:
<div id='{divId}' style='white-space:normal; width:120px;'>??!value</div>
Note: Change the width to desired specifications.
example:
click on the Update button at the top of the Field Descriptor Manager. Refresh the page to see results.
example:
Option B:
Input the following for words to break apart and wrap to the next line:
<div id='{divId}' style='white-space:normal; width:100px;word-break:break-all'>??!value</div>
Note: Change the width to desired specifications.
example:
click on the Update button at the top of the Field Descriptor Manager. Refresh the page to see results.
example: results will look similar to this