페이지를 깔끔하고 아름답게 만들기 위해 길이를 초과하는 텍스트를 숨겨야 하는 경우가 많습니다. 이는 목록 항목, 제목, 이름 등에 일반적으로 사용됩니다.
(1) 텍스트가 한 줄을 초과하는 경우 초과된 부분을 생략하고 '...'을 표시합니다.
이런 일이 자주 발생하는 경우 기능에 맞는 클래스 이름을 선택하여 재사용할 수 있습니다.
.line-limit-length {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
}
<p class="item">
<p class="line-limit-length">最新消息：神秘地球黑洞深不可测，不停吸入周围海水。</p>
<i class="icon icon-arrow-go"></i> //图标字体
</p>
(2) 컨테이너 너비 제한이 주어질 수 있으며 초과 부분은 생략됩니다
.product-buyer-name {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<h5 class="product-buyer-name">橘子橘子</h5>위 내용은 표시되는 문자의 CSS 제한을 초과하는 부분은 타원으로 표시됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
