Original is not easy, I hope you can pay attention to us, and then easily point a praise ~~

This article was first published on the front end team blog of The Political Cloud: probably the most comprehensive collection of “text overflow truncation and ellipsis” solutions

preface

Text overflow truncation is a common business scenario detail to consider in our daily development work. It looks “normal”, but there are different implementations of single-line truncation or multi-line truncation. Is the multi-line truncation judgment based on line number or height? Under these problems, what are the implementation solutions? How diverse and adaptable are they? Everything is afraid of serious, serious will grow. This paper tries to give some answers through coding practice.

Let’s start with basic, one-line text overflow ellipsis

Core CSS statement

  • Overflow: hidden; (If the length of the text exceeds the specified width, hide the excess content)
  • White – space: nowrap; (Set text to be displayed on a single line without newline)
  • The text – overflow: ellipsis; (Specifies that when text overflows, ellipsis is displayed to represent the trimmed text.)

advantages

  • No compatibility problem
  • Responsive truncation
  • Ellipsis is displayed only for text overflow range, otherwise ellipsis is not displayed
  • The ellipsis position is just right

Short board

  • Only single-line text truncation is supported

Applicable scenario

  • This works when a single line of text overruns to display ellipses

Demo

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

The sample picture

Further, multiple lines of text overflow omitted (by number of lines)

○ Pure CSS solution

Core CSS statement

  • – its – line – clamp: 2; Used to limit the number of lines of text to be displayed in a block element. 2 indicates a maximum of 2 lines. To achieve this effect, it needs to combine other WebKit properties.)
  • Display: – its – box; (Used with 1 to display the object as an elastic stretchable box model)
  • – its – box – received: vertical; (Used with 1 to set or retrieve the arrangement of the children of a flex box object)
  • Overflow: hidden; (Text overflow limits the width to hide content)
  • The text – overflow: ellipsis; (For multi-line text, use the ellipsis “…” Hide text from overflow scope)

advantages

  • Responsive truncation
  • Ellipsis is displayed only for text overflow range, otherwise ellipsis is not displayed
  • The ellipsis is in the right place

Short board

  • General compatibility: – Webkit-line-clamp only supports webKit kernel browsers

Applicable scenario

  • This applies to mobile pages because mobile browsers are more webKit-based

Demo

<style> .demo { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } </style> <body> <div class='demo'> This is a long text </div> </body>Copy the code

The sample picture

○ implementation based on JavaScript

advantages

  • No compatibility problem
  • Responsive truncation
  • Ellipsis is displayed only for text overflow range, otherwise ellipsis is not displayed

Short board

  • JS implementation is required, deviating from the principle of separation of presentation and behavior
  • When the text is mixed in English and Chinese, the ellipsis appears slightly out of position

Applicable scenario

  • Suitable for responsive truncation, multiple lines of text overflow omission

Demo

This parameter is applicable only to Chinese text. If the text contains English, you can modify it by yourself

<script type="text/javascript"> const text = 'This is a long piece of 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); // Const strNum = math.floor (lineWidth / + basefontsize. slice(0, -2)); // Const strNum = math.floor (lineWidth / + basefontsize. slice(0, -2)); let content = ''; 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>Copy the code

The sample picture

A step further, multi-line text overflow elision (by height)

○ Ellipsis is not displayed when multiple lines of text overflow

Core CSS statement

  • Overflow: hidden; (Text overflow limits the width to hide content)
  • The line – height: 20 px; (Combined with the height of elements, when the height is fixed, set the line height and control the number of lines displayed)
  • Max – height: 40 px; (Set the maximum height of the current element)

advantages

  • No compatibility problem
  • Responsive truncation

Short board

  • Simply truncate the text, do not show ellipsis, look and feel more stiff

Applicable scenario

  • This works when text overflow does not require ellipsis to be displayed

Demo

<style> .demo { overflow: hidden; max-height: 40px; line-height: 20px; } </style> <body> <div class='demo'> This is a long text </div> </body>Copy the code

The sample picture

○ Pseudo-element + positioning to achieve multiple line omission

Core CSS statement

  • position: relative; (Absolute positioning for pseudo-elements)

  • overflow: hidden; (Text overflow limits the width to hide content)

  • position: absolute; (Place ellipsis absolutely)

  • line-height: 20px; (Combined with the height of elements, when the height is fixed, set the line height and control the number of lines displayed)

  • height: 40px; (Set current element height)

  • ::after {} (sets ellipsis style)

advantages

  • No compatibility problem

  • Responsive truncation

Short board

  • Unable to recognize the length of the text, always display ellipsis regardless of whether the text overruns the range

  • The ellipsis display may not be just right, sometimes covering up half of the text

Applicable scenario

  • It is suitable for situations where the effect of ellipsis is low and text is bound to overflow elements

Demo

<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 long text </div> </body>Copy the code

The sample picture

○ Use Float feature, pure CSS to achieve multiple line omission

Core CSS statement

  • The line – height: 20 px; (Combined with the height of elements, when the height is fixed, set the line height and control the number of lines displayed)

  • Overflow: hidden; (Text overflow limits the width to hide content)

  • Float: right/left; (Implemented using element float feature)

  • Position: relative; (Move the ellipsis position according to its own position to achieve the effect of text overflow display ellipsis)

  • Word – break: break – all; (Enable a word to be split on a line break)

advantages

  • No compatibility problem

  • Responsive truncation

  • Ellipsis is displayed only for text overflow range, otherwise ellipsis is not displayed

Short board

  • The ellipsis display may not be just right, sometimes covering up half of the text

Applicable scenario

  • It is suitable for multi-line responsive truncation of text with low requirement for ellipsis effect

Demo

<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 long text </div> </div> </body>Copy the code

The sample picture

The principle of interpretation

There are three boxes A, B and C, A floating left, B, C floating right. Set the height of box A to be the same as the height (or maximum height) of box B

  1. When box B is lower than box A, box C will still be at the lower right of box B.

  2. If box B has too much text and is taller than box A, box C will not stay at the bottom right, but fall under box A.

  3. Next, relative position the C box, move the position of C box 100% to the right, and pull the width and height of C box up and left (otherwise you will not see it). This will not show the C box if the text does not overflow, and will show the C box if the text does overflow.

Close, avenue to simplify, ability encapsulation

Where repeated, let it be single; What’s complicated, keep it simple.

It’s too much work to do a bunch of code every time. This is where you need to consider the ability to truncate text into a custom container component that can be called at any time. There are many UI component libraries on the market, such as ViewUI Pro based on Vue, or MinUI that provides componentized solutions for small programs.

conclusion

This paper introduces several common text truncation ellipsis schemes, each has its own advantages and disadvantages, students can choose the scheme according to the actual development situation and needs. If you know of a better implementation, feel free to leave a comment in the comments section.

Refer to the article

  • Pure CSS implements multi-line text truncation
  • [CSS/JS] Limit the number of lines and lines of text, overflow with ellipsis display
  • HTML Tips: How to display ellipses over Single-line and multi-line text

, recruiting

ZooTeam, a young passionate and creative front-end team, belongs to the PRODUCT R&D department of ZooTeam, based in picturesque Hangzhou. The team now has more than 50 front-end partners, with an average age of 27, and nearly 30% of them are full-stack engineers, no problem in the youth storm group. The members consist of “old” soldiers from Alibaba and netease, as well as fresh graduates from Zhejiang University, University of Science and Technology of China, Hangzhou Electric And other universities. In addition to daily business docking, the team also carried out technical exploration and practice in material system, engineering platform, building platform, performance experience, cloud application, data analysis and visualization, promoted and implemented a series of internal technical products, and continued to explore the new boundary of front-end technology system.

If you want to change what’s been bothering you, you want to start bothering you. If you want to change, you’ve been told you need more ideas, but you don’t have a solution. If you want change, you have the power to make it happen, but you don’t need it. If you want to change what you want to accomplish, you need a team to support you, but you don’t have the position to lead people. If you want to change the pace, it will be “5 years and 3 years of experience”; If you want to change the original savvy is good, but there is always a layer of fuzzy window… If you believe in the power of believing, believing that ordinary people can achieve extraordinary things, believing that you can meet a better version of yourself. If you want to be a part of the process of growing a front end team with deep business understanding, sound technology systems, technology value creation, and impact spillover as your business takes off, I think we should talk. Any time, waiting for you to write something and send it to [email protected]

Recommended reading

1024 great offering!! A review of the best of the past year

Visual Construction System for Front-end Engineering Practice (PART 1)

Automated Web performance optimization analysis solution