Text overflow: ellipsis is usually used to deal with long text and display ellipsis in HTML!
text-overflow : clip | ellipsis
Clip does not display the ellipsis mark "...", but cuts directly
Ellipsis when the text in the object overflows, trim and display the ellipsis mark "..."
Processing method of single line text cutting
The cutting method of single line text is relatively simple, and it is also commonly used in general.
display: block; width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
Processing method of multi line text cutting
The cutting method of multi line text is a little special. Generally, the height limit method can only be used to cut, but the ellipsis cannot be displayed. Directly setting with CSS properties is only effective for the WebKit kernel
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. This is an unsupported WebKit property, which does not appear in the CSS specification draft.
display: -webkit-box displays the object as an elastic box model.
-webkit-box-orient sets or retrieves the arrangement of the child elements of the expansion box object.
text-overflow: ellipsis is used to hide out of range text with ellipsis "..." in case of multi line text.
- Copyright Notice : Unless otherwise stated, please contact the author for authorization and indicate the source!