타원 너머의 CSS 여러 줄

웹 디자인에서는 여러 줄의 텍스트를 표시해야 하는 경우가 많습니다. 그러나 텍스트 내용이 너무 길면 미리 설정된 너비 제한을 초과하여 레이아웃이 혼란스러워집니다. 이러한 상황을 방지하려면 중복되는 텍스트를 생략하고 생략 부호를 표시하여 전체적인 미적 측면과 사용자 경험을 높여야 합니다. 실제로 CSS 스타일을 사용하여 이 효과를 얻는 것은 매우 간단합니다. 다음으로 일반적으로 사용되는 몇 가지 방법을 소개하겠습니다.

방법 1: 한 줄 중심의 줄임표

이 방법은 가장 간단하고 한 줄만 있는 텍스트 콘텐츠에 적합합니다. 다음 두 줄의 CSS 코드를 통해 이를 달성할 수 있습니다.

overflow: hidden;
text-overflow: ellipsis; 

overflow는 너비 제한을 초과하는 텍스트를 숨기는 것이고, text-overflow는 너비 제한을 초과한 후 이를 표현하는 방법이며 여기서는 줄임표가 사용됩니다. . 그러나 이 두 줄의 코드에는 한 줄 생략에만 적용되는 제한 사항이 있습니다. 텍스트에 여러 줄이 있으면 다른 방법을 사용해야 합니다.

방법 2: 여러 줄의 양쪽 끝에 줄임표 정렬

이 방법을 사용하면 여러 줄의 텍스트가 허용되며 줄임표는 각 텍스트 줄의 마지막 단어 끝에 나타납니다. 여기서 핵심은 display: -webkit-box;를 사용하여 텍스트 컨테이너를 플렉스 박스로 변환하는 것입니다:

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

그중 -webkit-line-clamp는 텍스트 표시의 최대 줄 수를 제한하는 것을 의미합니다. 더 많은 행을 표시하려면 숫자를 더 큰 숫자로 변경하면 됩니다.

이 방법의 단점은 Webkit 커널을 지원하는 브라우저에서만 사용할 수 있다는 점이므로 호환성에 특별한 주의가 필요합니다.

방법 3: 여러 줄 줄임표 + 마우스 오버로 전체 텍스트 표시

이 방법은 "전체 텍스트 읽기" 버튼과 유사합니다. 전체 텍스트는 사용자가 텍스트 위에 마우스 포인터를 올려놓을 때만 표시됩니다. 먼저 텍스트를 컨테이너의 높이 범위로 제한하고 초과 텍스트는 숨겨야 합니다. 그런 다음 JavaScript의 mouseenter 및 mouseleave 이벤트를 통해 텍스트 표시 및 숨기기를 제어할 수 있습니다.

CSS 부분의 경우 다음 코드를 통해 구현할 수 있습니다.

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

js를 사용하여 이벤트 바인딩과 텍스트 표시 및 숨기기를 구현합니다.

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');
  });
}

이 방법은 텍스트 표시 및 숨기기를 더 잘 제어하고 사용자 경험을 향상할 수 있습니다. , 그러나 더 많은 코딩 시간과 동적 효과 구현이 필요합니다.

방법 4: Vue.js에서 필터 사용

Vue.js는 양방향 데이터 바인딩과 페이지의 동적 응답을 달성할 수 있는 프런트 엔드 프레임워크입니다. Vue.js에서는 필터를 통해 여러 줄의 타원 효과를 얻을 수 있습니다. 다음 코드에서 볼 수 있듯이:

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

그 중 v-html 지시문은 텍스트 콘텐츠를 렌더링하는 데 사용되며 파이프라인 기호 "|"는 필터와 표현식을 조정하는 데 사용됩니다. 필터는 아래와 같이 Vue.js 인스턴스에서 정의할 수 있습니다.

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;
});

이 필터는 더 복잡합니다. 텍스트에서 정기적인 일치를 수행하고 요구 사항을 충족하는 각 텍스트 줄을 해당 HTML로 변환한 다음 유지합니다. 타원. 또한 이 필터를 사용하면 일반적인 영어 단어 목록을 참조하여 정규식을 공식화할 수 있어 텍스트 표시 품질이 향상됩니다.

End

위는 CSS 여러 줄 타원을 구현하는 여러 가지 방법입니다. 개발자는 특정 요구에 따라 적절한 방법을 선택할 수 있습니다. 그중 Vue.js 필터를 사용한 구현은 비교적 새롭고 인기가 높으며 점점 더 많은 개발자가 채택하고 있습니다. 어떤 방법을 사용하든 호환성과 동적 반응성에 주의를 기울여야 하며, 사용자에게 최고의 경험을 제공하면서 웹사이트의 전반적인 미학을 향상시켜야 합니다.

위 내용은 타원 너머의 CSS 여러 줄의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!