css글자 자르기

한 줄 자르기

한 줄에 글자가 넘쳐서 ...으로 처리해야할 경우에는 다음과 같은 요소가 필요하다.

• width값이 정해져있어야 한다.
• white-space:nowrap; 자동 줄바꿈이 되지 않게 한다.
• overflow:hidden; 넘치는 부분을 안보이게 처리한다.
• text-overflow: ellipsis; 숨겨진 부분을 ...으로 처리하게 해준다.

여러 줄 자르기

잘라야 하는 텍스트가 여러 줄 일때에는 조금 다른방법을 사용 해야 한다.

• text-align: left 양측 정렬일 때는 ...가 표시 안될 수 있으므로 좌측정렬 한다.
• white-space:normal; 자동 줄바꿈이 되게 한다.
• overflow:hidden; 넘치는 부분을 안보이게 처리한다.

여기까지 해도 잘리기는 하지만 ... 처리가 되지 않는다. 그래서 웹킷계열 브라우저에서 ...을 표시하기 위해서

• text-overflow: ellipsis; 숨겨진 부분을 ...으로 처리하게 해준다.
• display: -webkit-box; 여백 삽입과 같이 유연한 높이 증가를 위해 플렉스 박스형태로 변환
• -webkit-line-clamp: 4; 보여줄 줄 갯수
• -webkit-box-orient: vertical; 플렉스 박스의 방향 설정

글자 자르기 참고 사이트