css - 텍스트 넘침

 

세줄 이상 넘어갈 때 위와 같이 글자가 겹치거나 의도치 않는 상황이 있는데, 이를 해결하기 위해서는

 

.example {
    height: 100px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

 

-webkit-line-clamp

몇 줄로 표시할 것인가 하는 옵션.

예제에서는 2줄로 설정하였다.

 

-webkit-box-orient

방향을 어떻게 설정할지.

값으로는, horizontal | vertical | inline-axis  | block-axis 이 있다.

 

-text-overflow

ellipsis로 설정하게 된다면, 설정한 높이값을 넘게 된다면, ...으로 표시가 된다.

 

**webkit 벤더 프릭스가 있는 이유는 각각에 브라우저마다 속성의 이름이 다르고 방식이 다르다.

벤더 프릭스는
크롬과 사파리를 지원하는 -webkit-
파이어폭스를 지원하는 -moz-
IE(윈도우 익스플로러) -ms-