In the BS application we write, sometimes we want to display the data in the database in a table, but the data length is inconsistent. For the sake of beauty, many websites use ellipsis to display content. I have seen many websites retrieve data of the same length first, and then add a ellipsis. In fact, text-overflow in CSS can solve this problem. Syntax:
Text-overflow:
Clip|
EllipsisValid value:
| Clip |
: |
Default Value. The omitted mark (...) is not displayed, but a simple cropping |
| Ellipsis |
: |
When the text in the object overflows, the omitted mark (...) is displayed (...) |
Note: sets or retrieves whether to use an omitted mark (...) to indicate text overflow in the object.
This attribute only applies to the horizontal inline direction, and the general Western text overflows. Inline overflow occurs when the text in the row exceeds the available width but there is no chance of line feed.
To force overflow and apply
EllipsisValue. The author must set the white-space attribute value of the object
Nowrap.
If there is no chance of line feed (for example, the width of the object container is narrow, and there is a long text without reasonable line breaks), there is no application
NowrapIt may also overflow.
To enable
EllipsisValue is applied. This attribute must be set to an object with an invisible area. The best choice is to set the overflow attribute
Hidden. Set the overflow attribute
ScrollOr
AutoThis attribute is also applied. However, a scroll bar appears.
By selecting the omitted mark, you can select hidden text. When this option is selected, the omitted flag is hidden and replaced by text.
This attribute provides an efficient way to create an omitted tag in DHTML.
This property
CurrentstyleThe object is read-only. Other objects can be read and written.
Corresponding script features:
Textoverflow.
<Div style = "width: 100%; Height: 90px; Background-color: #87 ceeb; padding: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; "you can select the attribute value of the text in the selection box below. Take a look at what will happen, and then you will understand what they mean. </Div>
You can try it by yourself.
