CSS 텍스트가 한 줄과 여러 줄의 타원을 초과한다는 것을 어떻게 알 수 있습니까?-CSS 튜토리얼-php.cn

CSS 텍스트가 한 줄과 여러 줄의 타원을 초과한다는 것을 어떻게 알 수 있습니까?

不言

풀어 주다： 2018-09-19 10:45:37

원래의

2803명이 탐색했습니다.

때때로 웹페이지를 디자인할 때 텍스트가 너무 길어서 페이지가 보기 흉해지는 경우가 있습니다. 그렇다면 이 문제를 해결하는 방법은 무엇일까요? 이번 글에서는 한줄에 줄임표를 초과하는 CSS 텍스트와 줄임표에 여러 줄의 텍스트를 구현하는 방법을 소개하겠습니다.

먼저, 타원을 넘어 한 줄의 텍스트를 구현하는 CSS 방법을 살펴보겠습니다.

CSS는 text-overflow:ellipsis 속성을 사용하여 한 줄의 텍스트에서 줄임표의 오버플로 표시를 실현해야 합니다. 물론 일부 탐색과 호환되도록 너비 속성도 추가해야 합니다.

타원 구현 코드를 벗어난 CSS 한 줄 텍스트:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8"> 
<title>省略号 test</title> 
<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
} 
body{ 
padding:10px; 
font-family:Arial; 
} 
#test { 
position:relative; 
width:150px; 
height:20px; 
line-height:20px; 
text-overflow:ellipsis; 
white-space:nowrap; 
*white-space:nowrap; 
overflow:hidden; 
border:1px solid #999; 
} 
#test span{ 
position:absolute; 
top:0; 
right:0; 
display:block; 
float:left; 
} 
</style> 
</head> 
<body> 
<div id="test">php中文网php中文网php中文网php中文网php中文网php中文网php中文网</div> 
</body> 
</html>

로그인 후 복사

타원을 벗어난 CSS 한 줄 텍스트의 효과는 다음과 같습니다.

CSS 텍스트가 한 줄과 여러 줄의 타원을 초과한다는 것을 어떻게 알 수 있습니까?

text-overflow: 줄임표 속성은 오버플로 표시만 지원합니다. 한 줄의 텍스트에 대한 줄임표 여러 개를 구현하려면 줄임표를 표시하는 줄 텍스트 오버플로는 어떻습니까? 다음으로 줄임표를 넘어 여러 줄의 텍스트를 구현하는 css 방법에 대해 계속해서 이야기하겠습니다. (text-overflow:ellipsis 속성에 대한 자세한 내용은 css 매뉴얼을 참조하세요.)

1. CSS에서는 CSS 속성을 사용하여 줄임표 이외의 여러 줄 텍스트를 직접 설정할 수 있습니다(-webkit 커널만 가능). 유효)

구문:

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

로그인 후 복사

대부분의 모바일 브라우저는 WebKit 커널을 기반으로 하므로 이 방법은 모바일 단말기에 적합합니다.

-webkit-line-clamp는 블록에 표시되는 텍스트 줄 수를 제한하는 데 사용됩니다. 요소는 CSS 초안 사양에 나타나지 않는 비표준 속성(지원되지 않는 WebKit 속성)입니다.

display: -webkit-box는 객체를 유연한 상자 모델로 표시합니다.

-webkit-box-orient는 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색합니다.

text-overflow: 줄임표는 여러 줄의 텍스트에 사용되며 줄임표 "..."를 사용하여 범위를 초과하는 텍스트를 숨깁니다.

2. CSS에서 줄임표를 넘어 여러 줄의 텍스트를 구현하려면 절대 위치 지정 및 패딩을 사용하세요. (크로스 브라우저 솔루션)

문법:

p{
position: relative; 
line-height: 20px; 
max-height: 40px;
overflow: hidden;
}
p::after{
content: "..."; 
position: absolute; 
bottom: 0; 
right: 0; 
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

로그인 후 복사

이 방법의 원리는 다음과 같습니다. 먼저 그런 다음 텍스트가 포함된 요소의 오른쪽에 위치(오른쪽 패딩)를 남겨두고 마지막으로 절대 위치 지정을 사용하여 오른쪽 패딩 영역에... 위치를 지정합니다.
참고: 이 방법은 응용 범위가 넓지만 텍스트가 줄을 초과하지 않는 경우에도 줄임표가 나타납니다. 이 방법은 js로 최적화할 수 있습니다.

참고:

과도한 텍스트가 노출되는 것을 방지하려면 높이를 줄 높이의 정수배로 설정하세요.

텍스트의 절반만 표시되는 것을 방지하려면 p::after에 그라데이션 배경을 추가하세요.

ie6-7은 콘텐츠 콘텐츠를 표시하지 않으므로 ie6-7과 호환되도록 태그를 추가해야 합니다(예: ...). ::after를 :after로 바꿔야 합니다.

이 글은 여기에서 끝납니다. 줄임표 이외의 CSS 텍스트에 대한 자세한 내용은 PHP 중국어 웹사이트를 참조하세요.

위 내용은 CSS 텍스트가 한 줄과 여러 줄의 타원을 초과한다는 것을 어떻게 알 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!