Height: 40px (set current element height).Position: relative (absolute positioning for pseudo elements).○ pseudo element + positioning to achieve multiline ellipsis

For text overflows where no ellipsis is required.

Simply truncate the text, do not display the ellipsis, which is relatively rigid in appearance.

Max height: 40px (set the maximum height of the current element).

Line height: 20px (set the line height and control the number of displayed lines when the element height and height are fixed).

Take a step further, multi line text overflows and omits (by height) ○ multi line text overflow without ellipsis Multiple lines can hold the total number of wordsĬonst totalStrNum = Math.floor(strNum * lineNum) Ĭonst lastIndex = totalStrNum - totalTextLen Ĭontent = text.slice(0, lastIndex - 3).concat('.') The calculated strnum is the number of words that can be contained in a row within the element (Chinese and English are not distinguished)Ĭonst strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2)) If there is English in the text, it can be modified by yourself Ĭonst text = 'this is a very long piece of text' Ĭonst ele = document.getElementsB圜lassName('demo') Ĭonst baseWidth = window.getComputedStyle(ele).width Ĭonst baseFontSize = window.getComputedStyle(ele).fontSize Ĭonst lineWidth = +baseWidth.slice(0, -2)

It is applicable to response truncation and multi line text overflow omissionĬurrently only applicable to Chinese text.

When the text is mixed with Chinese and English, the position of ellipsis is slightly different.

JS implementation required, departing from the principle of separation of presentation and behavior.

Implementation scheme based on JavaScript

It is more suitable for mobile page, because mobile device browser is more based on WebKit kernel.

General compatibility: – WebKit line clamp property is only supported by browser of WebKit kernel.

Ellipsis display position is just right.

Text overflow: ellipsis (in case of multiple lines of text, use ellipsis “…” Hide overflow text).

-WebKit Box Original: vertical (use with 1 to set or retrieve the arrangement of child elements of the expansion box object).

Display: – WebKit box (used in combination with 1 to display objects as elastic expansion box model).

To achieve this effect, it needs to combine other WebKit properties)

-Webkit-line-clamp: 2 (used to limit the number of lines of text displayed in a block element.

Applies to single line text overflow with EllipsisĪdvanced, multiline text overflow ellipsis (by lines) Pure CSS implementation scheme.

Only single line text truncation is supported.

The ellipsis position is displayed exactly.

Ellipsis is only displayed if the text overflows, otherwise, no ellipsis is displayed.

Text overflow: ellipsis (specifies that when text overflows, ellipsis is displayed to represent the trimmed text).White space: nowrap (set text to be displayed on one line, no line wrapping).First come basic, single line text overflow omitted This paper attempts to give some answers through coding practice. Is it single line or multi line truncation? Is multi row truncation based on row number or height? What are the solutions to these problems? What are their differences and scene adaptability? In all things, we are afraid of the truth, and the truth will grow. It seems “common”, but there are different differences in implementation. In our daily development work, text overflow truncation is a common business scenario detail to consider. This article starts from the front-end team blog of Zhengcai cloud: probably the most complete collection of “ text overflow truncation and omission” schemes preface

Js text overflow ellipsis