css multiple lines beyond ellipses

In web design, it is often necessary to display multi-line text. However, when the text content is too long, it will exceed the preset width limit, resulting in a confusing layout. In order to avoid this situation, we need to omit the redundant text and display the ellipses to increase the overall aesthetics and user experience. In fact, it is very simple to use CSS styles to achieve this effect. Next, we will introduce several commonly used methods.

Method 1: Single line centered ellipses

This method is the simplest and suitable for text content with only one line. We can achieve this through the following two lines of CSS code:

overflow: hidden;
text-overflow: ellipsis; 

overflow is to hide the text that exceeds the width limit, text-overflow is the way to express it beyond the width limit, and the ellipsis is used here. However, there is a limitation with these two lines of code, which only applies to single-line omissions. If the text has multiple lines, we need to use other methods.

Method 2: Align ellipses on both ends of multiple lines

This method allows multiple lines of text, and an ellipsis appears at the end of the last word of each line of text. The key here is to use display: -webkit-box; to convert the text container into a telescopic box:

.box {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // 限制显示的行数
}

Among them, -webkit-line-clamp means limiting the maximum line of text display number. If you want to display more rows, just change the number to a larger number.

The disadvantage of this method is that it can only be used by browsers that support the Webkit kernel, so special attention needs to be paid to compatibility.

Method 3: Multi-line ellipsis Display full text by hovering the mouse

This method is similar to the "Read full text" button. When the user hovers the mouse pointer over the text, the full text will be displayed. First, we need to limit the text to the height range of the container, and the excess text is hidden. Then, we can control the display and hiding of text through JavaScript's mouseenter and mouseleave events.

For the CSS part, we can achieve it through the following code:

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; //限定显示行数
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-text {
  display: block;
  cursor: pointer;
}

Use js to implement event binding and text display and hiding:

var text = document.querySelector('.text');
var textHeight = window.getComputedStyle(text).height;

if(parseInt(textHeight) < text.scrollHeight) {
  text.classList.add('show-text');
  text.addEventListener('mouseenter', function() {
    text.classList.remove('text');
  });
  text.addEventListener('mouseleave', function() {
    text.classList.add('text');
  });
}

This method can Better control over the display and hiding of text improves user experience, but it requires more coding time and dynamic effects to be implemented.

Method 4: Use filters in Vue.js

Vue.js is a front-end framework that can achieve two-way binding of data and dynamic response of the page. In Vue.js, we can achieve the effect of multi-line ellipses through filters. The following code is shown:

<p v-html="text | multilineEllipsis(3)"></p>

Among them, the v-html directive is used to render text content, and the pipeline symbol "|" is used to coordinate filters and expressions. The filter can be defined in the Vue.js instance, as shown below:

Vue.filter('multilineEllipsis', function(text, lines) {
  var stopwords = ['the', 'in', 'on', 'at', 'is', 'are', 'to', 'and'];
  var reg = new RegExp(`(?:(?<=(^|(.{2,}?\W)))[${stopwords.join('')}])?(?<line>(.|\n){1,20}(?=(.|\n){0,20}[\W]$))`, 'g');
  var len = 0;
  var result = '';
  var lineCount = 0;

  while(len <= text.length && lineCount < lines) {
    var match = reg.exec(text.slice(len));
    if(match && match.groups.line) {
      result += match.groups.line;
      len += match[0].length;
    } else {
      break;
    }

    if(len < text.length) {
      var nextchar = text[len];
      if(nextchar !== ' ' && nextchar !== '
' && nextchar !== '') {
        result += '...';
        break;
      }
    }
    lineCount++;
  }

  if(len < text.length) {
    result += '...';
  }

  return result;
});

This filter is more complex. It will perform regular matching in the text and convert each line of text that meets the requirements into the corresponding HTML. and keep the ellipses. This filter also allows you to formulate regular expressions by referring to a list of common English words, improving the quality of text display.

End

The above are several ways to implement CSS multi-line ellipses. Developers can choose the appropriate method according to specific needs. Among them, the implementation using Vue.js filters is relatively new and popular, and is adopted by more and more developers. No matter which method is used, attention must be paid to compatibility and dynamic responsiveness, and to enhance the overall aesthetics of the website while giving users the best experience.

The above is the detailed content of css multiple lines beyond ellipses. For more information, please follow other related articles on the PHP Chinese website!