자바스크립트에서 초과 콘텐츠를 대체하기 위해 타원을 사용하는 방법

페이지 개발 시 텍스트 내용이 한계를 초과하는 경우가 종종 있으며, 페이지를 아름답고 간결하게 유지하기 위해 일반적으로 생략 부호를 사용하여 초과된 내용을 대체합니다. JavaScript에서는 이 기능을 구현하기 위해 몇 가지 방법을 사용할 수 있습니다.

1. CSS 방법

CSS에는 이미 요소에서 텍스트가 오버플로될 때 처리하는 방법을 제어하는 ​​데 사용되는 text-overflow 속성이 있습니다. 이 속성에는 세 가지 값이 있습니다.

1. clip: 초과 부분을 잘라냅니다.
2. 줄임표: 여분의 부품을 교체하려면 줄임표를 사용하세요.
3. 설정되지 않음: 설정되지 않았습니다.

text-overflow 속성을 사용하려면 오버플로 속성을 숨김 또는 스크롤로 설정해야 합니다. 동시에 텍스트가 줄 바꿈되는 것을 방지하려면 공백 속성을 nowrap로 설정해야 합니다.

예:

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

HTML에서 이 클래스 이름을 사용하면 초과 텍스트에 대한 줄임표 효과를 얻을 수 있습니다.

2. JavaScript 방법

CSS를 통해 줄임표 효과를 얻을 수 없는 경우 JavaScript를 사용하여 얻을 수 있습니다. 다음은 몇 가지 구현 방법입니다.

1. substring() 메서드 사용

JavaScript의 substring() 메서드는 문자열의 일부를 가져오는 데 사용됩니다. 이 방법을 사용하여 문자열을 자르고 끝에 줄임표를 추가할 수 있습니다.

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

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

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

이 방법의 문제점은 텍스트 길이가 제한 길이보다 작으면 줄임표도 추가된다는 것입니다.

2. slice() 메서드 사용

substring() 메서드와 유사하게, Slice() 메서드도 문자열의 일부를 가로챌 수 있습니다. 차이점은 Slice() 메서드가 음수를 매개변수로 받아들일 수 있다는 점입니다. 즉, 끝부터 잘라냅니다.

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); // "这是一段超出了限定长度的..."

문자열 길이가 제한 길이보다 작을 때 줄임표를 추가하는 문제를 피하려면 Slice() 메서드를 사용하세요.

3. split() 및 Join() 메서드 사용

먼저 텍스트 문자열을 배열로 변환한 다음 Join() 메서드를 사용하여 처음 n개의 배열 요소를 문자열로 병합할 수 있습니다. 마지막으로 문자열 끝에 줄임표를 추가합니다.

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); // "这是一段超出了限定长度的文本。"

이 방법의 문제점은 줄 바꿈이나 탭과 같은 일부 특수 문자를 처리할 수 없다는 것입니다.

요약

CSS의 text-overflow 속성을 사용하면 쉽게 텍스트 줄임표 효과를 얻을 수 있지만, 일부 특수한 경우에는 적합하지 않을 수 있습니다. 자바스크립트에서 줄임표 효과를 구현하려면 상황에 따라 적절한 방법을 선택해야 합니다. 어느 쪽이든 실제 요구 사항에 따라 적절한 조정과 최적화가 이루어져야 합니다.

위 내용은 자바스크립트에서 초과 콘텐츠를 대체하기 위해 타원을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!