집 > 기사 > 웹 프론트엔드 > CSS에서 초과 텍스트를 숨기고 타원으로 바꾸는 방법

CSS에서 초과 텍스트를 숨기고 타원으로 바꾸는 방법

清浅원래의: 2018-11-24 15:51:086230검색

CSS를 구현하여 초과 텍스트를 숨기고 줄임표로 바꾸는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 텍스트 내용을 입력하고 마지막으로 "overflow:hidden" 및 "text"를 통해 숨겨진 부분에 줄임표를 추가합니다. -overflow" 속성을 사용할 수 있습니다.

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3 버전.

CSS에서 텍스트가 제한을 초과하면 Overflow:hidden을 사용하여 숨기고 CSS의 text-overflow 속성을 사용하여 숨겨진 부분에 줄임표를 추가할 수 있습니다. 상자 내용을 초과하는 텍스트 내용이 많습니다. 이 경우 숨기기 위해 Overflow: Hidden을 자주 사용하지만, 오늘은 이를 사용하여 기사의 초과 부분을 숨기고 대체할 수 있다는 점을 알려드리겠습니다. 다음은 기사에서 자세히 소개하겠습니다

html code

p{
width:300px;
height:30px;
border: 1px solid #ccc;
text-align: center;
font-size: 12px;
line-height:30px;
}
</style>
</head>
<body>
<p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!
php从入门到精通,一站式php自学平台!</p>

Image 18.jpg

text-overflow 속성

은 텍스트가 포함된 요소를 오버플로할 때 발생하는 일을 지정합니다. CSS3의 속성입니다.

clip: 텍스트 자르기, 초과 부분 삭제

text-overflow:clip;
overflow:hidden;
white-space:nowrap;规定段落中的文本不进行换行

Image 16.jpg

ellipsis: 삭제된 콘텐츠를 대체하려면 줄임표를 사용하세요

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

Image 17.jpg

숨김 마우스를 놓으면 단어가 표시됩니다

overflow:visible;

CSS에서 초과 텍스트를 숨기고 타원으로 바꾸는 방법 요약: 이상 이 글의 내용은 모두에게 도움이 되기를 바랍니다.

위 내용은 CSS에서 초과 텍스트를 숨기고 타원으로 바꾸는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：하나의 문서로 웹페이지의 순수 CSS 레이아웃을 마스터하세요다음 기사：하나의 문서로 웹페이지의 순수 CSS 레이아웃을 마스터하세요