CSS에서 세 점을 숨기는 방법

CSS에서 세 개의 점을 숨기는 방법: 1. 한 줄의 경우 CSS 속성 "text-overflow: ellipsis;"를 통해 텍스트 오버플로를 세 개의 점으로 표시할 수 있습니다. 2. 여러 줄의 경우; , "overflow" 속성을 사용할 수 있습니다: Hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;"을 달성할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

CSS에서 3점 숨기기를 구현하는 방법은 무엇입니까?

css 텍스트 오버플로는 세 개의 점으로 숨겨져 있습니다...

(1)한 줄

white-space: nowrap;//不换行
text-overflow: ellipsis;//将文本溢出显示为（…）
overflow: hidden;//溢出隐藏。

(2)여러 줄

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

참고: text-overflow 속성은 텍스트가 요소를 넘칠 때 텍스트가 표시되는 방법을 지정합니다. 그것을 포함하고 있습니다. 오버플로 후에 텍스트를 잘라내거나 줄임표(...)를 표시하거나 사용자 정의 문자열을 표시하도록 설정할 수 있습니다(일부 브라우저에서는 지원되지 않음).

text-overflow는 다음 두 가지 속성과 함께 사용해야 합니다:

white-space: nowrap;
overflow: hidden;

Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

Value

clip은 텍스트를 잘라냅니다.

ellipsis는 잘린 텍스트를 나타내기 위해... 줄임표를 표시합니다.

string 주어진 문자열을 사용하여 잘린 텍스트를 나타냅니다.

initial은 속성 기본값으로 설정됩니다.

inherit는 상위 요소에서 이 속성 값을 상속합니다.

추천 학습: "css 동영상 튜토리얼"

위 내용은 CSS에서 세 점을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!