CSS에서 타원 너머의 텍스트를 설정하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 타원 너머의 텍스트를 설정하는 방법

醉折花枝作酒筹

Apr 20, 2021 pm 02:12 PM

css

방법: 먼저 "overflow:hidden" 문을 사용하여 제한을 초과한 후 내용이 숨겨지도록 설정한 다음 "text-overflow:ellipsis" 문을 사용하여 내용이 제한을 초과할 때 줄임표로 표시되도록 설정합니다. 마지막으로 "white-space:nowrap" 문을 사용하여 텍스트를 설정하세요. 그냥 감싸지 마세요.

CSS에서 타원 너머의 텍스트를 설정하는 방법

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

새 HTML 페이지를 만들고 HTML 코드 페이지에서

태그를 찾은 다음 태그에

태그를 찾아 이 태그 아래에 <style> 태그를 만들고 <style> 태그에 클래스 cont가 포함된 스타일 콘텐츠를 설정합니다. <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> .cont{ overflow:hidden;/*内容超出后隐藏*/ } </style> </head> <body> <p class="cont"> 订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p> </body> </html></pre><p>코드를 저장하고, 브라우저를 사용하여 html 파일을 열어서 효과를 확인해보면, 콘텐츠의 높이가 설정되지 않아 콘텐츠가 숨겨지지 않는 것을 확인할 수 있습니다. <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png?x-oss-process=image/resize,p_40" class="lazy" title="1618897643717434.png" alt="CSS에서 타원 너머의 텍스트를 설정하는 방법"/><p> 내용이 한 줄로 표시되도록 설정하면 내용을 초과하면 줄임표로 표시됩니다. cont 클래스에 콘텐츠를 추가하면 공백: nowrap; 줄로 표시되고 초과 이후의 콘텐츠는 줄임표로 표시됩니다. text-overflow: ellipsis; : 줄임표를 동시에 사용해야 표시됩니다. <pre class='brush:php;toolbar:false;'><style> .cont{ overflow:hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/* 超出内容显示为省略号 */ white-space: nowrap;/* 文本不进行换行 */ } </style></pre><p>코드를 저장한 후 브라우저를 사용하여 열어서 한도를 초과하면 내용이 줄임표로 표시되는 효과를 확인하세요. <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/183/356/670/1618897808567717.png?x-oss-process=image/resize,p_40" class="lazy" title="1618897808567717.png" alt="CSS에서 타원 너머의 텍스트를 설정하는 방법"/><p>추천 학습: <a href="https://www.php.cn/course/list/12.html" target="_blank">css 비디오 튜토리얼</style>

위 내용은 CSS에서 타원 너머의 텍스트를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사