한 줄 및 여러 줄의 텍스트 오버플로를 구현하고 타원을 표시하는 CSS 구현 방법

이 글에서는 한 줄과 여러 줄의 텍스트에서 줄임표의 오버플로 표시를 구현하는 CSS의 구현 방법을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. 한 줄 텍스트에 줄임표의 오버플로 표시를 구현합니다. 학생들은 모두 text-overflow:ellipsis 속성을 사용하는 방법을 알아야 합니다. 물론 부분 탐색과 호환되도록 너비 속성도 추가해야 합니다.

1. 한 줄 Overflow

1, 한 줄 오버플로, 초과된 부분이 표시되거나 차단됩니다. 전제에는 너비가 있어야 합니다.

CSS: {width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}, 클립으로 가로채기;

구현 코드:

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;

효과는 다음과 같습니다:

그러나 이 속성만 한 줄을 지원합니다. 텍스트 오버플로는 타원을 표시합니다. 여러 줄의 텍스트 오버플로를 구현하고 타원을 표시하려면 어떻게 해야 할까요? 다음으로, 다음과 같이 여러 줄 텍스트에서 줄임표의 오버플로 표시에 중점을 두겠습니다.

2. Multi-line Overflow

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

구현 방법:

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

효과는 그림과 같습니다.

적용 범위:
WebKit의 CSS 확장 속성을 사용하므로 이 방법이 적합합니다. WebKit 브라우저 및 모바일 터미널용

참고:

1.-webkit-line-clamp는 블록 요소에 표시되는 텍스트 줄 수를 제한하는 데 사용됩니다. 이 효과를 얻으려면 다른 WebKit 속성과 결합해야 합니다. 일반적으로 결합되는 속성:
2.display: -webkit-box; 객체를 유연한 상자 모델로 표시하기 위해 결합해야 하는 속성입니다.
3.-webkit-box-orient는 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색하기 위해 속성과 결합되어야 합니다.

구현 방법:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}    
p::after{content: "..."; position: absolute; bottombottom: 0; rightright: 0; padding-left: 40px;    
background: -webkit-linear-gradient(left, transparent, #fff 55%);    
background: -o-linear-gradient(rightright, transparent, #fff 55%);    
background: -moz-linear-gradient(rightright, transparent, #fff 55%);    
background: linear-gradient(to rightright, transparent, #fff 55%);    
}

적용 범위:

이 방법은 응용 범위가 넓지만 텍스트가 줄을 넘지 않는 경우에도 줄임표가 나타납니다. 이 방법은 js로 최적화할 수 있습니다.
참고:

1. 과도한 텍스트가 노출되는 것을 방지하려면 높이를 줄 높이의 정수배로 설정하세요.

2. 텍스트의 절반만 표시되지 않도록 p::after에 그라데이션 배경을 추가하세요.

3. ie6-7은 콘텐츠 콘텐츠를 표시하지 않으므로 ie6-7과 호환되도록 태그를 추가해야 합니다(예: ...). ::after를 :after로 바꿔야 합니다.

스크립트 하우스 편집기 추가됨:

ie 핵심 브라우저는 줄 높이와 높이를 정의해야 합니다. -webkit-line-clamp는 몇 줄을 의미합니다. 예를 들어

line-height: 20px;

max-height: 40px;

display: -webkit-box;

-webkit-box-orient: 수직;

-webkit-line-clamp: 2;

overflow: Hidden;

-webkit-line-clamp

-webkit-line-clamp는 CSS 초안 사양에 나타나지 않는 지원되지 않는 WebKit 속성입니다.

블록 요소에 표시되는 텍스트 줄 수를 제한하세요. 이 효과를 얻으려면 다른 외부 WebKit 속성과 결합해야 합니다. 일반적으로 결합되는 속성:

display: -webkit-box; 개체를 유연한 상자 모델로 표시하려면 결합해야 합니다.
-webkit-box-orient는 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색하기 위해 속성과 결합되어야 합니다.
text-overflow는 여러 줄 텍스트의 경우 줄임표 "..."를 사용하여 범위를 초과하는 텍스트를 숨기는 데 사용할 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS 아이콘을 텍스트와 정렬하는 방법

위 내용은 한 줄 및 여러 줄의 텍스트 오버플로를 구현하고 타원을 표시하는 CSS 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!