방법: 먼저 "overflow:hidden" 문을 사용하여 제한을 초과한 후 내용이 숨겨지도록 설정한 다음 "text-overflow:ellipsis" 문을 사용하여 내용이 제한을 초과할 때 줄임표로 표시되도록 설정합니다. 마지막으로 "white-space:nowrap" 문을 사용하여 텍스트를 설정하세요. 그냥 감싸지 마세요.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
새 HTML 페이지를 만들고 HTML 코드 페이지에서
태그를 찾은 다음 태그에
.
태그를 찾아 이 태그 아래에 <style> 태그를 만들고 <style> 태그에 클래스 cont가 포함된 스타일 콘텐츠를 설정합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div><p>코드를 저장하고, 브라우저를 사용하여 html 파일을 열어서 효과를 확인해보면, 콘텐츠의 높이가 설정되지 않아 콘텐츠가 숨겨지지 않는 것을 확인할 수 있습니다. </p><p><img src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png" title="1618897643717434.png" alt="CSS에서 타원 너머의 텍스트를 설정하는 방법"/></p><p> 내용이 한 줄로 표시되도록 설정하면 내용을 초과하면 줄임표로 표시됩니다. cont 클래스에 콘텐츠를 추가하면 공백: nowrap; 줄로 표시되고 초과 이후의 콘텐츠는 줄임표로 표시됩니다. text-overflow: ellipsis; : 줄임표를 동시에 사용해야 표시됩니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
text-overflow: ellipsis;/* 超出内容显示为省略号 */
white-space: nowrap;/* 文本不进行换行 */
}
</style></pre><div class="contentsignin">로그인 후 복사</div></div><p>코드를 저장한 후 브라우저를 사용하여 열어서 한도를 초과하면 내용이 줄임표로 표시되는 효과를 확인하세요. <p><img src="https://img.php.cn/upload/image/183/356/670/1618897808567717.png" title="1618897808567717.png" alt="CSS에서 타원 너머의 텍스트를 설정하는 방법"/><p>추천 학습: <a href="https://www.php.cn/course/list/12.html" target="_blank">css 비디오 튜토리얼</style>
위 내용은 CSS에서 타원 너머의 텍스트를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
