CSS에서 오버플로 숨기기를 구현하는 방법

CSS에서 오버플로 숨기기를 구현하는 방법: 1. 요소에 "overflow: hide;" 스타일을 추가하고 콘텐츠가 요소 상자를 넘칠 때 오버플로 부분을 자르고 숨기도록 설정합니다. 2. "text-overflow; : ellipsis;"를 요소에 추가합니다. 스타일, 잘린 내용(숨겨진 내용)은 줄임표 기호 "..."로 표시할 수 있습니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

한 줄의 텍스트에서 줄임표의 오버플로 표시를 구현하려면 text-overflow:ellipsis 속성을 사용하는 방법을 모두 알아야 합니다. 물론 일부 탐색과 호환되도록 너비 속성도 추가해야 합니다. .

구현 방법:

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

효과는 그림과 같습니다.

그러나 이 속성은 한 줄의 텍스트에 대한 줄임표 오버플로 표시만 지원합니다. 여러 줄의 텍스트.

다음으로, 다음과 같이 여러 줄 텍스트에서 타원의 오버플로 표시에 중점을 두겠습니다.

구현 방법:

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

효과는 다음과 같습니다:

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

참고:

• -webkit -line-clamp는 블록 요소에 표시되는 텍스트 줄 수를 제한하는 데 사용됩니다. 이 효과를 얻으려면 다른 WebKit 속성과 결합해야 합니다. 일반적으로 결합되는 속성:

• display: -webkit-box; 객체를 유연한 상자 모델로 표시하기 위해 결합해야 하는 속성입니다.

• -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로 최적화될 수 있습니다. [추천 학습: css 비디오 튜토리얼]

참고:

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

• 텍스트의 절반만 표시되는 것을 방지하려면 p::after에 그라데이션 배경을 추가하세요.

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

위 내용은 CSS에서 오버플로 숨기기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!