텍스트 단어 수가 줄임표 표시를 초과하는 문제를 해결하기 위한 CSS 방법... (한 줄, 여러 줄 텍스트)

한 줄의 텍스트에서 타원의 오버플로 표시를 실현하려면 학생들은 모두 text-overflow:ellipsis속성을 사용해야 한다는 것을 알아야 합니다. , 물론 너비를 늘려야 합니다width 속성은 부분 탐색과 호환됩니다.

구현 방법:

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

효과는 다음과 같습니다.

그러나 이 속성은 원하는 경우 한 줄 텍스트에 대한 타원 오버플로 표시만 지원합니다. 여러 줄 텍스트의 오버플로 표시를 구현하려면 줄임표는 어떻습니까?

다음은 다음과 같이 여러 줄의 텍스트가 넘칠 때 타원을 표시하는 데 중점을 두겠습니다.

구현 방법:

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; bottom: 0; right: 0;
padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);}

효과는 다음과 같습니다:
적용 범위:
이 방법은 응용 범위가 넓지만, 텍스트가 줄을 초과하지 않는 경우 이 방법은 js로 최적화할 수 있습니다.

참고:

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

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

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

[관련 권장사항]

1. 문자수 제한을 초과할 경우 줄임표를 사용하여 html 텍스트에 표시되는 문자수를 조절하는 방법

2. CSS를 사용하여 제목 표시 문제 해결

3. 무료 온라인 CSS 동영상 튜토리얼

위 내용은 텍스트 단어 수가 줄임표 표시를 초과하는 문제를 해결하기 위한 CSS 방법... (한 줄, 여러 줄 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!