CSS를 사용하여 너무 긴 제목 텍스트에 줄임표를 표시하는 방법 소개

이 글에서는 제목 텍스트의 긴 부분에 줄임표를 표시하기 위해 CSS를 사용하는 방법을 주로 소개하고, 한 줄 텍스트 오버플로와 여러 줄 텍스트 오버플로의 상황을 설명합니다. 필요한 친구들이 참고할 수 있습니다. 얼마 전 회사의 모바일 사이트를 재구성하는 동안 제품 목록의 제목에 두 줄만 표시하고 두 줄을 초과하는 문자는 줄임표로 표시해야 한다는 요구 사항에 직면했습니다. 아래 그림과 같이 당시 첫인상은 스타일이 줄 바꿈 텍스트의 생략을 제어할 수 없기 때문에 백그라운드 출력 중에 문자를 가로채거나 JS를 통해 문자를 계산해야만 이 요구사항을 처리할 수 있다는 것이었습니다. 새로운 버전의 모바일 사이트는 스트리밍 중입니다. 레이아웃의 경우, 다양한 해상도의 휴대폰에서는 줄 바꿈 폭이 불확실하므로 가로채는 문자 수에 대한 표준 범위가 없습니다. 예를 들어 iPhone에서는 2줄에 15자가 표시되지만 삼성에서는 2줄에 표시되지 않을 수도 있고, 해상도가 낮은 휴대폰에서는 이미 15자가 표시될 수도 있습니다. 세 줄. 이런 일이 발생하면 머리가 아프다.
먼저 한 줄의 텍스트에 줄 바꿈을 쓰는 방법을 살펴보겠습니다.

코드는 다음과 같습니다.

A20 Banana Pi Development Board Module - Deep Blue

CSS 코드

.title{   
    width: 150px;   
    height: 25px;   
    line-height: 25px;   
    overflow: hidden;   
    whitewhite-space: nowrap;   
    text-overflow: ellipsis;   
}

위의 코드는 줄임표가 넘치는 한 줄의 텍스트를 작성하는 오랜 표준 방식으로, 많은 시나리오에서 모든 사람이 이 방식을 사용했을 것이라고 생각합니다.

여러 줄 표시 문제를 해결하는 방법은 무엇입니까? 인터넷 검색 끝에 위에서 언급한 요구 사항을 해결할 수 있는 chrome API인 webkit-line-clamp가 현재 발견되었습니다. 크롬에서만 지원할 수 있고 W3C 표준에는 포함되어 있지 않습니다. 즉, 앞으로는 이 기능이 크롬에서만 지원된다는 점입니다. 아쉽지만 현재는 모든 모바일 단말이 웹킷을 사용하기 때문에 가능합니다. 위 API를 안심하고 사용하세요. 구현을 살펴보겠습니다. 예:

코드는 다음과 같습니다.

A20 Banana Pi Development Board Module - Deep Blue

CSS 코드

.title{   
    width:150px;   
    overflow : hidden;   
    text-overflow: ellipsis;   
    display: -webkit-box;   
    -webkit-line-clamp: 2;   
    -webkit-box-orient: vertical;   
}

위 내용은 CSS를 사용하여 너무 긴 제목 텍스트에 줄임표를 표시하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!