CSS의 텍스트 오버플로 속성 및 텍스트 잘림에 대한 샘플 코드 공유

이 글은 주로 CSS의 text-overflow 속성과 텍스트 잘림에 대한 관련 정보를 소개합니다. 이 글은 여러분의 참고와 학습을 위한 자세한 샘플 코드를 제공합니다. 최종 개발자에게 도움이 필요하면 편집자를 따라가서 배우십시오.

머리말

이 글에서는 CSS의 text-overflow 속성과 텍스트 잘림 관련 내용을 주로 소개합니다. 참고 및 학습을 위해 공유합니다.

text- Overflow 및 text truncation

CSS 사용자는 text-overflow에 매우 익숙해야 하며, 한 줄의 텍스트를 자르려면 text-overflow: ellipsis를 포함한 세 줄의 코드가 가장 일반적일 수 있습니다. 우리가 사용합니다.

text-overflow: ellipsis;  
overflow: hidden;  
white-space: nowrap;

이 작은 CSS 조각은 IE6과도 호환됩니다. 결국 text-overflow: ellipsis는 원래 IE에만 ​​적용되었기 때문에 초기에는 Firefox7에서 텍스트 잘림 문제가 발생했습니다. FF의 필요성을 제쳐두는 것은 집중하는 동안 이 코드를 사용하는 것입니다. 물론, 여러 줄 잘림은 여전히 ​​의문의 여지가 있습니다. 브라우저 간 호환성 요구 사항이 높은 일부 상황에서는 콘텐츠를 자르는 데 도움이 되는 백엔드가 필요했습니다.

여러 줄의 텍스트 잘림을 달성하는 다른 방법이 있지만 당시 브라우저 형식에서 모든 것을 처리하는 것은 불가능합니다. 예를 들어 이제 의사 요소 :after를 사용하여 여러 줄의 끝 위치를 지정하고 그라데이션 전환을 적용하여 잘림을 시뮬레이션할 수 있습니다.

.clamp{
  height: 3 .6em;
  line-height: 1.2em;
  overflow: hidden;
  position: relative;
}
.clamp:after{
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

그라디언트를 사용하면 잘림 현상이 덜 빡빡해 보이지만 실제 상황에서는 사용해본 적이 없습니다. :) 이 방법은 단점이 많고 지루해 보이기 때문에 이 방법을 사용하는 것을 결코 좋아하지 않습니다. 방법. 급한 일을 억지로 하지 않는 한, 저는 항상 다른 사람들에게 "나는 할 수 없어"라고 진지하게 말합니다~

그저 웹킷이라면 일반적인 접근 방식은 -webkit-line-clamp입니다. webkit 클라이언트는 여전히 더 나은 방법이며 그 효과는 정확히 우리가 기대했던 것과 같습니다.

display: -webkit-box;  
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

수년(>5)이 지난 후에도 이 코드는 여전히 잘 작동하지만 지금 돌이켜보면 -webkit- Box는 이전 flex 구문은 현재 새로운 flex 구문과 공존하지만 언젠가는 사라질 수 있습니다. 하지만 그럼에도 불구하고 더 좋은 방법은 없고, -webkit-line-clamp를 대체하는 속성도 없고, 이전 구문과 새 구문을 혼합할 수 없기 때문에 계속해서 "클래식" 코드를 사용해야 합니다.

-webkit-line-clamp에는 또 다른 작은 문제가 있습니다. 즉, 중국어 지원에 결함이 있습니다. 영어의 완벽한 효과에 비해 중국어를 사용하는 경우 컨테이너의 너비가 변경됨에 따라 잘린 점 "..."이 어색해지기 쉽고 2점 또는 심지어 1점만 표시되므로 찾아보시기 바랍니다. 업데이트된 버전은 이 작은 문제를 해결할 수 있습니다.

텍스트 잘림 시 우리는 기본적으로 점 3개를 사용하여 표현하는 데 익숙합니다. 실제로 위에서 언급한 의사 요소 시뮬레이션 방법을 제외하고는 이 표현을 변경할 수 없습니다. 그러나 text-overflow 속성을 되돌아보면 새 버전의 표준은 더 많은 가능성을 가져올 것입니다.

CSS 기본 사용자 인터페이스 모듈 레벨 3은 현재 CR 상태입니다. 텍스트 오버플로에는 클립 또는 줄임표라는 두 가지 값만 선택할 수 있습니다. 그러나 초안의 레벨 4에서는 속성 값이 더 많아졌습니다.

[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}

텍스트를 지정하여 잘릴 때 변경되지 않은 세 점을 대체할 수 있으며 전환을 지정하고 거리를 제어할 수 있으며 시작과 끝을 제어하기 위해 두 개의 값을 제공할 수도 있습니다. 동시에... 쓸모없어 보이지만 실제로 Firefox는 9.0부터 값과 이중 값 구문을 처음 지원했습니다! Firefox가 텍스트 오버플로로 비판을 받은 후 방식을 바꾸고 최신 함정으로 이동한 것은 아닐까...

그러나 텍스트 오버플로는 여전히 텍스트 오버플로와 동일하며 여전히 한 줄입니다. , 여전히 이전 파트너 공백: nowrap;과 함께 작동하며 여전히 친숙한 맛을 가지고 있습니다. 좀 더 세련된 기능이 있더라도 여전히 여러 줄 자르기에 대한 수단이 부족하다는 것을 숨길 수는 없습니다.

요약

위 내용은 CSS의 텍스트 오버플로 속성 및 텍스트 잘림에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!