Text overflow truncation omission

Single-line text overflow ellipsis#

Core CSS statements#

overflow: hidden; (If the length of the text exceeds the specified width, the overflowed content will be hidden)
white-space: nowrap; (Set the text to display in a single line without line breaks)
text-overflow: ellipsis; (When the text overflows, display an ellipsis to represent the trimmed text)

Pros#

No compatibility issues
Responsive truncation
Ellipsis is only displayed when the text overflows, otherwise it is not displayed
Ellipsis is positioned correctly

<style>
    .demo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<body>
	<div class="demo">This is a very long text</div>
</body>

Multi-line text overflow ellipsis (by line number)#

Core CSS statements#

-webkit-line-clamp: 2; (Used to limit the number of lines of text displayed in a block element, 2 means a maximum of 2 lines. To achieve this effect, it needs to be combined with other WebKit properties)
display: -webkit-box; (Used in conjunction with 1, it displays the object as a flexible box model)
-webkit-box-orient: vertical; (Used in conjunction with 1, it sets or retrieves the arrangement of the child elements of the flex box object)
overflow: hidden; (Hide the content when the text overflows the specified width)
text-overflow: ellipsis; (In the case of multi-line text, use an ellipsis "..." to hide the text that overflows the range)

Pros#

Responsive truncation
Ellipsis is only displayed when the text overflows, otherwise it is not displayed
Ellipsis is positioned correctly

Cons#

Average compatibility: The -webkit-line-clamp property is only supported by browsers with the WebKit engine (suitable for mobile pages)

<style>
	.demo {
		display: -webkit-box;
	    overflow: hidden;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
</style>

<body>
	<div class='demo'>This is a very long text</div>
</body>

JavaScript-based implementation solution#

Applicable to responsive truncation and multi-line text overflow ellipsis

Pros#

No compatibility issues
Responsive truncation
Ellipsis is only displayed when the text overflows, otherwise it is not displayed

Cons#

Requires JS implementation, deviating from the principle of separating presentation and behavior
Slight deviation in the position of the ellipsis when the text is a mixture of Chinese and English

<script type="text/javascript">
    const text = 'This is a very long text';
    const totalTextLen = text.length;
    const formatStr = () => {
        const ele = document.getElementsByClassName('demo')[0];
        const lineNum = 2;
        const baseWidth = window.getComputedStyle(ele).width;
        const baseFontSize = window.getComputedStyle(ele).fontSize;
        const lineWidth = +baseWidth.slice(0, -2);

        // The calculated strNum is the number of characters that can be accommodated in one line inside the element (regardless of Chinese or English)
        const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));

        let content = '';
        
      	// Total number of characters that can be accommodated in multiple lines
        const totalStrNum = Math.floor(strNum * lineNum);

        const lastIndex = totalStrNum - totalTextLen;

        if (totalTextLen > totalStrNum) {
            content = text.slice(0, lastIndex - 3).concat('...');
        } else {
            content = text;
        }
        ele.innerHTML = content;
    }
    
    formatStr();
    
	window.onresize = () => {
        formatStr();
    };
</script>

<body>
	<div class='demo'></div>
</body>

Multi-line text overflow without ellipsis#

Core CSS statements#

overflow: hidden; (Hide the content when the text overflows the specified width)
line-height: 20px; (Combined with the element height, when the height is fixed, set the line height to control the number of displayed lines)
max-height: 40px; (Set the maximum height of the element)

Pros#

No compatibility issues
Responsive truncation

Cons#

Simply truncate the text without displaying ellipsis, which may look abrupt

<style>
	.demo {
		overflow: hidden;
		max-height: 40px;
		line-height: 20px;
	}
</style>

<body>
	<div class='demo'>This is a very long text</div>
</body>

Pseudo-element + positioning to achieve multi-line truncation#

Core CSS statements#

position: relative; (Absolute positioning for pseudo-elements)
overflow: hidden; (Hide the content when the text overflows the specified width)
position: absolute; (Absolute positioning for ellipsis)
line-height: 20px; (Combined with the element height, when the height is fixed, set the line height to control the number of displayed lines)
height: 40px; (Set the height of the element)
::after {} (Set the style of the ellipsis)

Pros#

No compatibility issues
Responsive truncation

Cons#

Unable to recognize the length of the text, the ellipsis is always displayed regardless of whether the text overflows or not
The position of the ellipsis may not be perfect, sometimes it may cover half of the text

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
	<div class='demo'>This is a very long text</div>
</body>

Using Float feature to achieve multi-line truncation with pure CSS#

Core CSS statements#

line-height: 20px; (Combined with the element height, when the height is fixed, set the line height to control the number of displayed lines)
overflow: hidden; (Hide the content when the text overflows the specified width)
float: right/left; (Use the floating feature of the element to achieve)
position: relative; (Move the position of the ellipsis based on its own position to achieve text overflow and display ellipsis effect)
word-break: break-all; (Allow a word to be split when wrapping)

Pros#

No compatibility issues
Responsive truncation
Ellipsis is only displayed when the text overflows, otherwise it is not displayed

Cons#

The position of the ellipsis may not be perfect, sometimes it may cover half of the text

<style>
    .demo {
        background: #099;
        max-height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
    .demo::before{
        float: left;
        content:'';
        width: 20px;
        height: 40px;
    }
    .demo .text {
        float: right;
        width: 100%;
        margin-left: -20px;
        word-break: break-all;
    }
    .demo::after{
        float:right;
        content:'...';
        width: 20px;
        height: 20px;
        position: relative;
        left:100%;
        transform: translate(-100%,-100%);
    }
</style>

<body>
    <div class='demo'>
    	<div class="text">This is a very long text</div>
    </div>
</body>

References:
https://juejin.cn/post/6844903988081475591