CSS로 한줄 자르기. 말줄임표.

CSS로 한줄이 넘어가는 문자를 한줄로 줄일 수 있다.

한줄 뿐만 아니라 여러 줄로 설정도 가능하다.

1. 한줄로 내용 자르기.

  간단한 방법으로 overflow: hidden; 을 통해 한줄이 넘어가는 문자를 숨길 수 있다.

  뒤에 말줄임표를 추가하기 위해서는 text-overflow: ellipsis; 를 넣어주면 된다.

2. N줄로 내용 자르기.

text-align: left : 글자 정렬이 양쪽 정렬이면 말 줄임표가 숨겨질 수 있으니 좌측 정렬로 하여야 함.

word-wrap: break-word : 잘라버릴 글자를 단어 단위로 잘라줌.

display: -webkit-box : 여백 삽입과 같이 유연한 높이 증가를 위해 플렉스 박스형태로 변환.

-webkit-line-clamp: 3 : 보여줄 줄 수.

-webkit-box-orient: vertical : 플렉스 박스의 방향 설정.

저는 개발자이지만 유용한 정보라 포스팅 하였습니다.

감사합니다.