CSS 텍스트가 한도를 초과한 후 타원 숨기기 및 표시 및 기타 브라우저 호환 솔루션(권장)

더 이상 고민하지 말고 코드부터 시작하겠습니다!

1. 텍스트 한 줄만 표시한 후 숨기고 생략

 // 한 줄의 텍스트만 표시하고 .element {를 생략합니다.
	width: 300px; /* 고정 너비 설정 필요 */
	white-space: nowrap; /* 줄 바꿈 없이 단일 줄 표시 */
	overflow:hidden; /* 상자 너머 부분 숨기기 */
	text-overflow: ellipsis; /* 초과하는 줄임표 표시 */
}

2. 지정된 행 수의 텍스트를 표시한 후 숨기고 생략합니다.

 // 여러 줄의 text.element를 표시한 후 생략합니다.
width: 300px; /* 고정 너비를 설정해야 합니다 */
display: -webkit-box; /* 유연한 상자 레이아웃 사용 */
-webkit-box-orient: 수직; /* 수직 배열 */
-webkit-line-clamp: 3; /* 세 줄 표시 */
overflow:hidden; /* 상자 너머 부분 숨기기 */
text-overflow: ellipsis; /* 초과하는 줄임표 표시 */
}

여러 줄 텍스트 잘림을 달성하기 위해 display: -webkit-box; 유연한 상자 레이아웃 및 -webkit-line-clamp 사용하여 여러 줄 텍스트를 생략합니다.
참고: 이 방법은 WebKit 핵심 브라우저(예: Chrome, Safari 등)에 적합합니다. 다른 브라우저의 경우 추가 폴리필 지원이 필요할 수 있습니다.

기타 솔루션

1. JavaScript를 사용하여 텍스트 내용의 높이를 동적으로 계산하고 자릅니다.

2. 다음과 같은 기존 라이브러리를 사용하십시오.
클램프.js: 브라우저 간 여러 줄 텍스트 자르기를 위한 경량 라이브러리입니다.

 //한 줄 $clamp(myHeader, {clamp: 1});
//여러 줄 $clamp(myHeader, {clamp: 3});
//사용 가능한 높이를 기준으로 행 수를 자동으로 계산합니다. $clamp(myParagraph, {clamp: 'auto'});
//고정 높이를 기준으로 라인 수를 자동으로 계산합니다. $clamp(myParagraph, {clamp: '35px'});

3. CSS Fallback(부분 호환성 솔루션)
일부 브라우저의 경우 -webkit-line-clamp 속성에 대한 직접적인 지원은 없지만 간단한 CSS를 결합하여 대략적인 효과를 얻을 수 있습니다.

 .요소 {
표시: 블록; /* 블록으로 표시 */
Overflow: Hidden; /* 초과된 내용 숨기기 */
text-overflow: ellipsis; /* 초과하는 줄임표 표시 */
line-height: 1.5em; /* 줄 높이 설정 */
max-height: 4.5em; /* 최대 높이 3줄, 3줄 * 1.5줄 높이 = 4.5em */
공백: 일반; /* 일반 텍스트 줄 바꿈을 유지합니다 */
}

이 방식은 모든 경우에 정확한 여러 줄 잘림을 달성할 수는 없지만 기본적인 여러 줄 텍스트 생략 표시를 지원하는 데는 여전히 적합합니다.

이것으로 CSS 텍스트가 제한을 초과한 후 타원을 숨기고 표시하는 방법과 기타 브라우저 호환성 솔루션에 대한 내용을 마칩니다. 더 많은 관련 CSS 텍스트가 숨겨진 콘텐츠를 초과하면 downcodes.com에서 이전 기사를 검색하거나 아래의 관련 기사를 계속 찾아보세요. 앞으로도 downcodes.com을 더 많이 지원해 주시기를 바랍니다!