How to use ellipses to replace excess content in javascript

In page development, text content often exceeds the limit. At this time, we usually use ellipses to replace the excess content to keep the page beautiful and concise. In JavaScript, we can use some methods to achieve this functionality.

1. CSS method

CSS already has the text-overflow attribute, which is used to control how to handle when text overflows in an element. This property has three values:

1. clip: clip the excess part.
2. ellipsis: Use ellipses to replace excess parts.
3. unset: Not set.

Using the text-overflow attribute requires setting the overflow attribute to hidden or scroll. At the same time, the white-space attribute needs to be set to nowrap to prevent the text from wrapping.

For example:

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

Use this class name in HTML to achieve the ellipsis effect of the excess text.

2. JavaScript method

If the ellipsis effect cannot be achieved through CSS, JavaScript can be used to achieve it. Here are some implementation methods:

1. Using the substring() method

The substring() method in JavaScript is used to get a part of a string. You can use this method to truncate a string and add an ellipsis at the end.

function truncateText(text, length) {
  var truncated = text.substring(0, length);
  return truncated + '...';
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 10);

console.log(truncatedText); // "这是一段超出了限定长度的..."

The problem with this method is that if the text length is less than the limited length, ellipses will also be added.

2. Use the slice() method

Similar to the substring() method, the slice() method can also intercept a part of the string. The difference is that the slice() method can accept negative numbers as parameters, which means cutting from the end.

function truncateText(text, length) {
  var truncated = text.slice(0, length);
  if (text.length > length) {
    truncated += '...';
  }
  return truncated;
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 10);

console.log(truncatedText); // "这是一段超出了限定长度的..."

Use the slice() method to avoid the problem of adding ellipsis when the string length is less than the limited length.

3. Use the split() and join() methods

You can first convert the text string into an array, and then use the join() method to merge the first n array elements is a string. Finally, add an ellipsis at the end of the string.

function truncateText(text, length) {
  var words = text.split(' ');
  var truncatedWords = words.slice(0, length);
  if (words.length > length) {
    truncatedWords.push('...');
  }
  return truncatedWords.join(' ');
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 5);

console.log(truncatedText); // "这是一段超出了限定长度的文本。"

The problem with this method is that it cannot handle some special characters, such as newlines or tabs.

Summary

Using the CSS text-overflow property can easily achieve the text ellipsis effect, but it may not be applicable in some special cases. To implement the ellipsis effect in JavaScript, you need to choose an appropriate method according to the specific situation. Either way, appropriate adjustments and optimizations need to be made based on actual needs.

The above is the detailed content of How to use ellipses to replace excess content in javascript. For more information, please follow other related articles on the PHP Chinese website!