Ellipses appear on CSS multiline text overflow

This article mainly introduces the CSS multi-line text overflow when there is an ellipsis example of the relevant data, the content is very good, and now share to everyone, but also for everyone to do a reference.

Ellipses appear when multiple lines of text overflow

This article recommends 2 ways.

1. css

Tip: A browser that is compatible with chrome kernels only. FF is not supported.

. box {    Overflow:hidden;/* Overflow does not show overflow content *    /text-overflow:ellipsis;/* Use ellipsis instead of */display when overflow occurs    :-webkit-box; /* Private properties of Chrome browser. Displayed as box. */    -webkit-box-orient:vertical;/* Vertically arrange elements */    -webkit-line-clamp:2;/* show how many lines */}

Extend

Word-wrap

Key Words	Description	Default Value	value
Word-wrap	Conditions that specify word wrapping	Normal, wrap at the word hyphenation point.	Break-word, wrap the word inside.
Overflow-wrap, changed from Word-wrap to Overflow-wrap at CSS3

Text-overflow

Key Words	Description	Default Value	value
Test-overflow	How to display the text beyond the box		clip, trim the text. Ellipsis, the ellipsis is displayed. A string that displays the specified text.

White-space

Key Words	Description	Default Value	value
White-space	Ways to treat whitespace and whether to break lines	Normal, the blank will be ignored by the browser.	Pre, leave blank. nowrap, text does not wrap. Pre-wrap, leave blank, normal line wrap. Pre-line, merges blanks, preserves line breaks.

Box-orient

This property is not yet supported by the browser. You need to use the private properties of the respective browser.

Key Words	Description	Default Value	value
Box-orient	How child elements are sorted	Inline-axis the child elements along an inline axis (mapped to landscape).	Horizontal that specifies that child elements are arranged from left to right on a horizontal line. Vertical, arranges the child elements vertically from the top to the bottom. Block-axis, the child elements follow the block axis (mapped to vertical). Inherit, inherits the parent element.

Line-clamp

Only the chrome kernel's browser supports its own private properties.

Shows how many line block level elements.

2. js

There are many ways to use JS to control how the overflow text is displayed. A script file is recommended here: Ellipsis.js

Ellipsis.js

name	links
Ellipsis links	Https://www.jsdelivr.com/package/npm/ellipsis.js
Ellipsis	Https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js
Ellipsis git	Https://github.com/glinford/ellipsis.js

Use the method.

1. Introduction of script files

<script src= "Https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js" ></script>

2. Use

var ell = ellipsis ({    lines:3}) var ele = document.getelementsbyclassname (' Test ') Ell.add (ele)

Extend

It also has some configuration items. If not configured, the default value is used.

{    ellipsis: ' ... ',//default display of alternate text    debounce:0,//delay for how long after execution    of responsive:true,//whether there is a change in window size when the ClassName is executed    : ' . Clamp ',//The default action has elements of this class.    Lines:2,//only 2 rows of elements appear by default.    portrait:null,//default does not change, if you want to have a different number of rows in portrait mode,    break_word:true//default truncated word. }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!