>  기사  >  웹 프론트엔드  >  줄 바꿈을 비활성화하고 CSS에서 숨기는 것 이상을 수행하는 방법

줄 바꿈을 비활성화하고 CSS에서 숨기는 것 이상을 수행하는 방법

藏色散人
藏色散人원래의
2021-03-22 16:00:497117검색

줄 바꿈 및 숨김 이상을 금지하는 Css 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 일부 텍스트 콘텐츠를 만듭니다. 마지막으로 "white-space" 및 "text-overflow" 속성을 사용하여 콘텐츠 줄 바꿈 및 숨는 것 이상으로 그게 다야.

줄 바꿈을 비활성화하고 CSS에서 숨기는 것 이상을 수행하는 방법

이 글의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

CSS에서는 공백 속성과 오버플로 속성을 사용하여 텍스트 줄 바꿈을 방지하고 불필요한 부분을 숨길 수 있습니다. .

white-space 속성은 요소 내의 공백을 처리하는 방법을 지정합니다. 값이 nowrap으로 설정되면 텍스트는
태그를 만날 때까지 같은 줄에 계속 표시됩니다.

overflow 속성은 콘텐츠가 요소 상자를 오버플로할 때 발생하는 상황을 지정합니다. 값을 숨김으로 설정하면 콘텐츠가 잘리고 나머지 콘텐츠는 표시되지 않습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
width: 400px;
height: 100px;
border: 1px solid red;
}
.overflow{
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<p>普通文本!!!
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
</p>
<p class="overflow">
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
</p>
</body>
</html>

렌더링:

줄 바꿈을 비활성화하고 CSS에서 숨기는 것 이상을 수행하는 방법

text-overflow 속성을 추가하여 초과 부분을 숨기고 줄임표로 표시할 수도 있습니다.

text-overflow 속성은 텍스트가 포함된 요소를 오버플로할 때 발생하는 상황을 지정합니다. 이 속성 값은 다음과 같습니다.

clip은 텍스트를 자릅니다.

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

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

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
width: 400px;
height: 100px;
border: 1px solid red;
}
.text-overflow{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<p>普通文本!!!
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
</p>
<p class="text-overflow">
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
</p>
</body>
</html>

렌더링:

줄 바꿈을 비활성화하고 CSS에서 숨기는 것 이상을 수행하는 방법

[추천 학습: css 비디오 튜토리얼]

위 내용은 줄 바꿈을 비활성화하고 CSS에서 숨기는 것 이상을 수행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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