세 줄 이상 초과하면 CSS를 사용하여 한 줄만 표시하는 방법

세 줄 이상인 경우 CSS를 사용하여 한 줄만 표시하는 방법: 1. 해당 HTML 파일을 엽니다. 2. 텍스트 라벨의 CSS 속성을 ".text_singlerow {display:block;white-space: nowrap;overflow:hidden; text-overflow:ellipsis;}"를 사용하여 한 줄을 표시할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

세 줄 이상이면 CSS에서 한 줄만 표시하는 방법은 무엇입니까?

CSS에서 여러 줄 텍스트에 표시되는 줄 수 제어

때로는 한 줄, 두 줄, 세 줄의 여러 줄 텍스트 콘텐츠만 표시해야 하는 경우가 있습니다. CSS에서 관련 속성을 설정하는 코드는 다음과 같습니다.

// 多行显示
.text_morerow {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 显示2行
    -webkit-box-orient: vertical;
    word-break: break-all; 
}
 
 
// 单行显示
.text_singlerow {
    display:block; /*这里设置inline-block或者block；根据使用情况来定（行内元素需要加这个，块级元素和行内块级可以不用）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

두 줄만 표시되도록 설정했다고 가정하면 두 번째 줄 끝은 줄임표로 표시되고 세 번째 줄은 생략 부호로 표시됩니다. ...N 줄은 계속 표시됩니다. 레이블의 높이가 충분히 높으면 행 수 표시를 제어하려면 CSS 스타일을 설정하는 것 외에도 높이 설정과 결합해야 합니다. 라벨의.

추천 학습: "css 동영상 튜토리얼"

위 내용은 세 줄 이상 초과하면 CSS를 사용하여 한 줄만 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!