표시되는 문자의 CSS 제한을 초과하는 부분은 타원으로 표시됩니다.

페이지를 깔끔하고 아름답게 만들기 위해 길이를 초과하는 텍스트를 숨겨야 하는 경우가 많습니다. 이는 목록 항목, 제목, 이름 등에 일반적으로 사용됩니다.

(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!