.video_title {
font-size: 28rpx;
display: -webkit-box;
overflow: hidden;//隐藏
white-space: normal;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
// The white-space attribute sets how to deal with white space within the element.
| value | description |
|---|---|
| normal | default. The blank will be ignored by the browser. |
| pre | The blank will be kept by the browser. The behavior is similar to the <pre> tag in HTML. |
| nowrap | The text will not wrap, and the text will continue on the same line until the <br> tag is encountered. |
| pre-wrap | The blank sequence is preserved, but line breaks are performed normally. |
| pre-line | Combine blank character sequences, but retain line breaks. |
| inherit | Specifies that the value of the white-space attribute should be inherited from the parent element. |
The text-overflow attribute specifies what happens when the text overflow contains elements.
| value | description | test |
|---|---|---|
| clip | Trim the text. | test |
| ellipsis | An ellipsis is displayed to represent the trimmed text. | test |
| string | Use the given string to represent the trimmed text. |
The word-wrap attribute allows long words or URL addresses to wrap to the next line.
| value | description |
|---|---|
| normal | Line break only at allowed hyphenation points (browser keeps default processing). |
| break-word | Break lines inside long words or URL addresses. |
-webkit-line-clamp：<number>
Limit the number of lines of text displayed in a block element.
-webkit-line-clamp is an unsupported WebKit property, which does not appear in the draft CSS specification.
In order to achieve this effect, it needs to combine other foreign WebKit properties. Common combination attributes:
- display: -webkit-box; The attribute that must be combined to display the object as a flexible box model.
- -webkit-box-orient The attributes that must be combined to set or retrieve the arrangement of the child elements of the telescopic box object.
- Text-overflow can be used to hide text that is out of range with an ellipsis "..." in the case of multiple lines of text.
The box-orient property specifies that the child elements of the box should be arranged horizontally or vertically.
| value | description | test |
|---|---|---|
| horizontal | Arrange the child elements from left to right in the horizontal row. | test |
| vertical | Arrange child elements vertically from top to bottom. | test |
| inline-axis | Arrange child elements (mapped as horizontal) along the inline axis. | test |
| block-axis | Arrange child elements (mapped as vertical) along the block axis. | test |
| inherit | The value of the box-orient attribute should be inherited from the parent element. |
