디스플레이 타원을 초과하도록 CSS를 설정하는 방법-CSS 튜토리얼-php.cn

디스플레이 타원을 초과하도록 CSS를 설정하는 방법

青灯夜游

풀어 주다： 2021-10-11 17:08:59

원래의

157475명이 탐색했습니다.

CSS 제한을 초과하여 표시되도록 줄임표를 설정하는 방법: 1. "overflow:hidden;" 문을 사용하여 초과된 부분을 숨깁니다. 2. 줄임표를 표시하려면 "text-overflow:ellipsis;"를 사용하세요. 텍스트가 포함된 요소를 오버플로합니다.

디스플레이 타원을 초과하도록 CSS를 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

Css 설정은 디스플레이 너머에 줄임표가 표시되는 경우 두 가지 상황으로 나눌 수 있습니다.

한 줄의 텍스트가 넘치면 줄임표가 표시됩니다...
여러 줄의 텍스트가 넘치면 줄임표가 표시됩니다. ..

그러나 사용되는 핵심 코드는 동일합니다. 먼저 "overflow:hidden;"을 사용하여 초과 부분을 숨긴 다음 "text-overflow:ellipsis;"를 사용하여 텍스트를 줄임표로 표시해야 합니다. 초과할 때.

overflow: hide;개체 크기를 초과하는 내용을 표시하지 않습니다. 즉, 초과된 부분을 숨깁니다. overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
text-overflow：ellipsis;

text-overflow: ellipsis; 텍스트 개체 오버플로가 표시되면... 물론 점을 표시하지 않도록 클립 속성을 설정할 수도 있습니다.

1. .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			*{margin: 0px;padding: 0px;}
			.box{width: 300px;height: 500px;margin: 50px auto;}
			.overflow{
				width:220px;
				overflow:hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow:ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>
				css单行文本超出长度显示省略号
			</p>
			<p class="overflow">
				css单行文本超出长度显示省略号
			</p>
		</div>
	</body>
</html>

로그인 후 복사

렌더링:

디스플레이 타원을 초과하도록 CSS를 설정하는 방법 2. 여러 줄의 텍스트가 넘치고 줄임표가 표시됩니다...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			*{margin: 0px;padding: 0px;}
			.box{
				width: 280px;
				height: 62px;
				margin: 50px auto;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		</style>	
	</head>
	<body>
		<div class="box">
			css多行文本超出长度显示省略号，css多行文本超出长度显示省略号，
			css多行文本超出长度显示省略号，css多行文本超出长度显示省略号。
		</div>
	</body>
</html>

로그인 후 복사

(동영상 공유 학습: 디스플레이 타원을 초과하도록 CSS를 설정하는 방법 css 동영상 튜토리얼