CSS를 사용하여 제목 텍스트의 긴 부분에 줄임표를 표시하는 방법

이 글에서는 제목 텍스트의 긴 부분에 줄임표를 표시하는 CSS 방식을 주로 소개하고, 한 줄 텍스트 오버플로와 여러 줄 텍스트 오버플로 상황을 설명합니다. 필요하신 분들은 참고하시면 됩니다

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

A20 Banana Pi Development Board Module - Deep Blue

CSS code

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

Demo
위 코드는 줄임표를 넘나드는 한 줄의 텍스트를 작성하는 오랜 표준 방식입니다. . 이 방법을 여러 가지 시나리오에서 사용해 보신 적이 있을 것입니다.
여러 줄 표시 문제를 해결하는 방법은 무엇인가요? 인터넷 검색을 통해 위에서 언급한 요구 사항을 해결할 수 있는 chrome API인 webkit-line-clamp를 찾았습니다. 안타깝게도 이 API는 현재 chrome에서만 지원됩니다. 지원하지 않습니다. W3C의 표준 범위에 포함되지 않아 앞으로는 이 기능을 Chrome에서만 사용할 수 있다는 뜻입니다. 정말 아쉽지만 이제 모든 모바일 단말은 웹킷의 커널을 사용하므로 사용할 수 있습니다. API를 사용하여 구현을 살펴보겠습니다. 예:

A20 Banana Pi Development Board Module - Deep Blue

Demo

위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

CSS를 사용하여 순수 영어 숫자의 자동 줄바꿈 구현

CSS를 사용하여 페이지 콘텐츠의 가로 세로 비율을 유지하는 방법

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