Several ways to implement "text overflow truncation and omission" with pure CSS

In our daily development work, text overflow, truncation and omission are very common business scenario details that need to be considered. It looks "common", but there are different distinctions in implementation. Is it single-line truncation or multi-line truncation? Is the truncation judgment for multiple lines based on the number of lines or the height? What are the solutions to these problems? What are the differences between them and their adaptability to different scenarios?

Generally speaking, when we do this kind of text truncation effect, we hope to:

• Good compatibility and good support for major browsers
• Responsive cutoffs to adjust to different widths
• The ellipsis is displayed only when the text exceeds the range, otherwise it is not displayed
• The ellipsis position is displayed just right

Based on the above criteria, we will give some answers through coding practice.

Single line text overflow ellipsis

Core CSS Statements

• overflow: hidden; (If the text length exceeds the specified width, the excess content will be hidden)
• white-space: nowrap; (set the text to be displayed in one line and cannot wrap)
• text-overflow: ellipsis; (specifies that when text overflows, ellipsis symbols are displayed to represent trimmed text)

advantage

• Good compatibility and good support for major browsers
• Responsive cutoffs to adjust to different widths
• The ellipsis is displayed only when the text overflows the range, otherwise the ellipsis is not displayed
• The ellipsis position is displayed just right

Shortcomings

• Only single-line text truncation is supported, not multi-line text truncation

Applicable scenarios

• Applicable to the case where a single line of text overflows and displays an ellipsis

Demo

<div class="demo">
      The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed.</div>

.demo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Effect examples

Multiline text overflow ellipsis (-webkit-line-clamp)

Core CSS Statements

• overflow: hidden; (text overflows the specified width and the content is hidden)
• -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 are displayed. To achieve this effect, it needs to be combined with other WebKit properties)
• display: -webkit-box; (used in conjunction with -webkit-line-clamp: 2; to display the object as an elastic box model)
• -webkit-box-orient: vertical; (used in conjunction with -webkit-line-clamp: 2; to set or retrieve the arrangement of the child elements of the flex box object)
• text-overflow: ellipsis; (In the case of multiple lines of text, use ellipsis "..." to hide the text that overflows the range)
  

advantage

• Responsive cutoffs to adjust to different widths
• The ellipsis is displayed only when the text overflows the range, otherwise the ellipsis is not displayed
• The browser implements it natively, so the ellipsis is displayed in the correct position

Shortcomings

General compatibility: -webkit-line-clamp property is only supported by browsers with WebKit kernel

Applicable scenarios

Mostly suitable for mobile pages, because mobile device browsers are more based on the WebKit kernel

Demo

<div class="demo">
      The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed.

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

Effect examples

Multi-line text overflow ellipsis (pseudo-element + positioning)

Core CSS Statements

• position: relative; (absolute positioning for pseudo elements)
• overflow: hidden; (text overflows the specified width and the content is hidden)
• position: absolute; (give the ellipsis absolute positioning)
• line-height: 18px; (Combined with the element height, when the height is fixed, set the line height to control the number of displayed lines)
• height: 36px; (set the current element height)
• ::after {} (set ellipsis style)
• word-break: break-all; (If there is English in the text, it can make a word break when it breaks into a new line)
  

advantage

• Good compatibility and good support for major browsers
• Responsive cutoffs to adjust to different widths

Shortcomings

• The length of the text cannot be recognized. Regardless of whether the text overflows the range, the ellipsis is always displayed.
• The display may not be just right, sometimes half of the text is covered, and the text is not closely attached

Applicable scenarios

There is a lot of text content, and it is certain that the text content will exceed the container

Demo

<div class="demo">
      The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed The moonlight before the bed

.demo {
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
    word-break: break-all;
}
.demo::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    /* For better display effect */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

Effect examples

Multi-line text overflow ellipsis (Float)

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; (text overflows the specified width and the content is hidden)
• float: right/left; (implemented by using the floating characteristics of elements)
• position: relative; (Move the ellipsis position according to its own position to achieve the effect of displaying the ellipsis when the text overflows)
• word-break: break-all; (If there is English in the text, a word can be split on line breaks)
  

advantage

• Good compatibility and good support for major browsers
• Responsive cutoffs to adjust to different widths
• The ellipsis is displayed only when the text overflows the range, otherwise the ellipsis is not displayed

Shortcomings

The ellipsis may not be displayed just right, sometimes covering half of the text and not fitting closely to the text

Applicable scenarios

There is a lot of text content, and it is certain that the text content will exceed the container

Demo

<div class="demo">
      <div class="text">
        The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed. The moonlight is bright in front of the bed.
</div>

.demo {
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.demo .text {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break: break-all;
}
.demo::before {
  float: left;
  width: 5px;
  content: "";
  height: 40px;
}
.demo::after {
  float: right;
  content: "...";
  height: 20px;
  line-height: 20px;
  padding-right: 5px;
  text-align: right;
  width: 3em;
  margin-left: -3em;
  position: relative;
  left: 100%;
  top: -20px;
  padding-right: 5px;
    
  /* For better display effect */
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(255, 255, 255, 0)),
    to(white),
    color-stop(50%, white)
  );
  background: -moz-linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
  background: -o-linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
  background: -ms-linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
}

Effect examples

This concludes this article on several methods of implementing “text overflow, truncation and ellipsis” with pure CSS. For more relevant CSS text overflow, truncation and ellipsis content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!