Example of ellipsis when CSS multi-line text overflows

Ellipses appear when multi-line text overflows

This article recommends 2 methods.

1. CSS

Tip: Only compatible with Chrome browsers. ff is not supported.

.box {
    overflow: hidden; /* Overflow content is not displayed when overflow occurs*/
    text-overflow: ellipsis; /* Use ellipsis instead when overflow occurs*/
    display: -webkit-box; /* Private properties of the Chrome browser. Displayed as a box. */
    -webkit-box-orient: vertical; /* Arrange elements vertically */
    -webkit-line-clamp: 2; /* How many lines to display */
}

Extension

word-wrap

Keywords	describe	default value	value
word-wrap	Specifies the conditions for word wrapping	normal, wrap at word hyphenation points.	break-word, break within a word.
overflow-wrap, changed from word-wrap to overflow-wrap in CSS3

text-overflow

Keywords	describe	default value	value
test-overflow	How to display text outside the box		clip, trim text. ellipsis, displays an ellipsis. string, displays the specified text.

white-space

Keywords	describe	default value	value
white-space	How to treat whitespace and whether to wrap lines	Normal, whitespace is ignored by the browser.	pre, leave blank. nowrap, text does not wrap. pre-wrap, preserve whitespace, wrap normally. pre-line, collapse whitespace and preserve newlines.

box-orient

This property is not yet supported by browsers. Need to use the private properties of each browser.

Keywords	describe	default value	value
box-orient	How to sort child elements	inline-axis, child elements along the inline coordinate axis (mapped to the horizontal direction).	horizontal, specifies that the child elements are arranged from left to right in a horizontal line. vertical, arranges child elements vertically from top to bottom. block-axis, child elements are positioned along the block axis (mapped to vertical). inherit, inherits the parent element.

line-clamp

Only Chrome-based browsers support their own private properties.

How many lines of block-level elements to display.

2.js

There are many ways to use js to control how overflow text is displayed. Here is a recommended script file: ellipsis.js

ellipsis.js

name	Link
ellipsis link	https://www.jsdelivr.com/package/npm/ellipsis.js
ellipsis	https://cdn.jsdelivr.net/npm/[email protected]/ellipsis.js
ellipsis git	https://github.com/glinford/ellipsis.js

Directions:

1. Import script files

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ellipsis.js"></script>

2. Use

var ell = Ellipsis({
    lines: 3
})
var ele = document.getElementsByClassName('test')
ell.add(ele)

Extension

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

{
    ellipsis: '...', // The default alternative text to display debounce: 0, // The delay before executing responsive: true, // Whether to execute when the window size changes className: '.clamp', // The default action is for elements with this class.
    lines: 2, // Only 2 lines of elements appear by default.
    portrait: null, // No change by default, if you want a different number of rows in portrait mode,
    break_word: true // Break words by default.
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Vue implements real-time refresh of the time display in the upper right corner

>>: HTML Tutorial: Collection of commonly used HTML tags (6)