CSS를 사용하여 HTML에서 텍스트 잘림 구현

이번에는 CSS를 사용하여 HTML에서 텍스트 잘림을 구현하는 방법과 CSS를 사용하여 HTML에서 텍스트 잘림을 구현하는 방법에 대한 몇 가지 노트를 가져오겠습니다. 다음은 실제 사례입니다.

한 줄 텍스트 잘림 text-overflow

텍스트 오버플로: 줄임표는 우리가 자주 사용하는 것입니다. 단 몇 줄의 코드만으로 한 줄 텍스트 잘림을 달성할 수 있습니다.

div {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;
}

속성은 기본적으로 브라우저에서 지원되며 주요 브라우저와 잘 호환됩니다. 단점은 한 줄 텍스트 잘림만 지원하고 여러 줄 텍스트 잘림은 지원하지 않는다는 것입니다.

적용 가능한 시나리오: 한 줄 텍스트 잘림은 구현하기 가장 쉽고 효과도 가장 좋으므로 안심하고 사용할 수 있습니다.

다선 텍스트 차단 효과라면 구현이 그리 쉽지는 않습니다.

-webkit-line-clamp는 -webkit-line-clamp 속성을 통해

구현됩니다. 구체적인 방법은 다음과 같습니다.

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

display, -webkit-box-orient 및 Overflow와 함께 사용해야 합니다.

display: -webkit-box; 유연한 박스 모델.

-webkit-box-orient; 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색하려면 속성과 결합해야 합니다.

text-overflow: ellipsis; 줄임표 "..."를 사용하면 범위를 벗어난 텍스트가 숨겨집니다.

효과 관점에서 볼 때 장점은 다음과 같습니다.

다양한 너비에 따라 조정되는 반응형 잘림

텍스트가 범위를 초과할 때만 줄임표가 표시되고, 그렇지 않으면 줄임표가 표시되지 않습니다.

브라우저는 다음과 같습니다. 기본적으로 구현되어 있으므로 줄임표 위치가 올바르게 표시됩니다

하지만 -webkit-line-clamp는 표준화되지 않은 속성이고 CSS 사양 초안에 나타나지 않기 때문에 단점도 매우 직접적입니다. 즉, Webkit Core를 탑재한 브라우저만이 이 속성을 지원합니다. Firefox, IE 등의 브라우저는 이 속성을 지원하지 않으며 브라우저 호환성도 좋지 않습니다.

사용 시나리오: 모바일 장치 브라우저는 호환성이 좋지 않을 뿐만 아니라 잘림 효과도 좋기 때문에 주로 모바일 페이지에 사용됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

js-xlsx의 도구 라이브러리인 xlsxUtils 사용에 대한 자세한 설명

JS의 일상 공통 기능 통합

위 내용은 CSS를 사용하여 HTML에서 텍스트 잘림 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!