찾다
웹 프론트엔드CSS 튜토리얼Webkit 브라우저용 CSS에서 여러 줄 줄임표를 어떻게 만들 수 있습니까?

How Can I Create a Multi-Line Ellipsis in CSS for Webkit Browsers?

CSS에서 줄임표를 사용한 여러 줄 텍스트 잘림

가독성을 유지하면서 긴 텍스트를 압축해야 하는 필요성은 웹 디자인의 일반적인 과제입니다. . CSS는 줄임표로 텍스트를 자르는 text-overflow 속성을 제공하지만 일반적으로 이는 한 줄 시나리오에 적용됩니다. 텍스트의 두 번째 줄에 줄임표를 적용할 수 있나요?

기술적 딜레마

제공된 예에서 원하는 효과는 줄임표가 텍스트에 나타나는 것입니다. 두 번째 줄. 그러나 기본 동작은 제공된 HTML 마크업의 예시와 같이 첫 번째 줄의 텍스트를 자릅니다.

<p>I hope someone could help me. I need 
an ellipsis on the second line of...</p>

A Solution for Webkit Browsers

CSS는 그렇지 않습니다. 기본적으로 여러 줄 줄임표를 지원하지 않으므로 Webkit 기반 브라우저(예: Safari 및 Chrome)에 대한 해결 방법을 사용할 수 있습니다. 다음 CSS 조각은 원하는 효과를 얻습니다.

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

구현

조각의 CSS 속성은 다음과 같이 함께 작동합니다.

  • overflow: 숨김은 지정된 텍스트가 넘치지 않도록 방지합니다. Area.
  • text-overflow: ellipsis는 줄임표 잘림을 활성화합니다.
  • display: -webkit-box and -webkit-line-clamp: 3 표시되는 텍스트 줄 수를 3개로 제한합니다.
  • -webkit-box-orient: 세로로 텍스트 줄 정렬

브라우저 호환성

이 솔루션은 Webkit 브라우저에서만 작동한다는 점에 유의하는 것이 중요합니다. 다른 브라우저에서는 이 접근 방식을 지원하지 않을 수 있습니다. 그러나 지정된 컨텍스트에서 여러 줄 줄임표에 대한 안정적인 방법을 제공합니다.

위 내용은 Webkit 브라우저용 CSS에서 여러 줄 줄임표를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
마우스 움직임을 시뮬레이션합니다마우스 움직임을 시뮬레이션합니다Apr 22, 2025 am 11:45 AM

라이브 토크 나 수업 중에 대화식 애니메이션을 표시해야한다면 슬라이드와 상호 작용하기가 항상 쉽지 않다는 것을 알 수 있습니다.

Astro Actions 및 Fuse.js로 검색을 전원합니다Astro Actions 및 Fuse.js로 검색을 전원합니다Apr 22, 2025 am 11:41 AM

Astro를 사용하면 빌드 중에 대부분의 사이트를 생성 할 수 있지만 Fuse.js와 같은 것을 사용하여 검색 기능을 처리 할 수있는 작은 서버 측 코드가 있습니다. 이 데모에서는 퓨즈를 사용하여 개인 "북마크"세트를 검색합니다.

정의되지 않은 : 세 번째 부울 가치정의되지 않은 : 세 번째 부울 가치Apr 22, 2025 am 11:38 AM

문서가 저장되는 동안 Google 문서에서 볼 수있는 것과 유사한 프로젝트 중 하나에서 알림 메시지를 구현하고 싶었습니다. 다시 말해, a

제 3의 진술의 방어에서제 3의 진술의 방어에서Apr 22, 2025 am 11:25 AM

몇 달 전에 나는 해커 뉴스를 썼고 (하나와 마찬가지로) IF 문을 사용하지 않는 것에 대한 (현재 삭제 된) 기사를 가로 질러 달렸습니다. 이 아이디어를 처음 접한다면 (나처럼

다국어 번역에 웹 스피치 API 사용다국어 번역에 웹 스피치 API 사용Apr 22, 2025 am 11:23 AM

공상 과학 소설의 초기부터 우리는 우리와 대화하는 기계에 대해 환상을 가지고 있습니다. 오늘은 평범합니다. 그럼에도 불구하고 제작 기술

Jetpack Gutenberg 블록Jetpack Gutenberg 블록Apr 22, 2025 am 11:20 AM

Gutenberg가 핵심으로 풀려 났을 때를 기억합니다. 왜냐하면 나는 그날 WordCamp에 있었기 때문입니다. 지금은 몇 달이 지났으므로 점점 더 많은 것을 상상합니다.

VUE에서 재사용 가능한 페이지 매김 구성 요소 생성VUE에서 재사용 가능한 페이지 매김 구성 요소 생성Apr 22, 2025 am 11:17 AM

대부분의 웹 애플리케이션의 배후에있는 아이디어는 데이터베이스에서 데이터를 가져 와서 최상의 방법으로 사용자에게 제시하는 것입니다. 우리가 거기에서 데이터를 다룰 때

'Box Shadows'와 Clip-Path를 함께 사용합니다'Box Shadows'와 Clip-Path를 함께 사용합니다Apr 22, 2025 am 11:13 AM

#039;는 당신이 의미있는 것처럼 보일 수있는 상황에 대한 약간의 단계를 수행하자. 이것에서

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.