CSS에서 오버플로 및 줄바꿈 없음을 설정하는 방법

Css에서 오버플로 및 줄바꿈 없음 설정 방법: 먼저 HTML 샘플 파일을 만든 다음 div를 정의하고 마지막으로 "overflow:hidden; text-overflow:ellipsis;"와 같은 CSS 스타일을 설정하여 오버플로를 방지합니다. 줄바꿈 효과.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS에서 오버플로와 줄 바꿈 없음을 설정하는 방법은 무엇입니까?

css 텍스트 오버플로가 줄바꿈되지 않고, 타원이 표시됩니다.

한 줄 텍스트 오버플로;

텍스트 오버플로보다 더 많은 너비를 설정하고,

div{
width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;
}

여러 줄의 텍스트 오버플로를 사용합니다. 속성, 이 방법은 WebKit 브라우저 및 모바일 터미널에 적용 가능합니다.

참고:

1.-webkit-line-clamp는 블록 요소에 표시되는 텍스트 줄 수를 제한하는 데 사용됩니다. 이 효과를 얻으려면 다른 WebKit 속성과 결합해야 합니다. 일반적으로 결합되는 속성:

2.display: -webkit-box; 객체를 유연한 상자 모델로 표시하려면 결합해야 합니다.

3.-webkit-box-orient는 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색하기 위해 속성과 결합되어야 합니다.

div{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}

아직 Webkit 브라우저가 아닙니다~~

추천 학습: "

css 비디오 튜토리얼

"

위 내용은 CSS에서 오버플로 및 줄바꿈 없음을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!