텍스트 라인 수 제한
영역에 비해 글자 수가 넘치면 ( "..." ) 로 말줄임표를 사용하는 경우가 있다. javascript로 일정글자 수 이상일 때 slice 함수를 활용 할 수도 있지만 css로도 제어 말줄임표를 줄 수 있다.
아래 코드와 이미지는 글자들이 width값에 맞춰 자동으로 줄바꿈이 이뤄지고 있는 상태이다.
<html lang="en"> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } .center { display: flex; align-items: center; justify-content: center; height: 100%; } .textBox { width: 300px; padding: 14px; border: 1px solid #000; } </style> </head> <body> <div class="center"> <p class="textBox"> The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </p> </div> </body> </html>
한 줄로 제한하기
width값이 있는 p태그에 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 스타일을 추가하면 ( "..." ) 말줄임표와 함께 영역을 넘치는 글자는 숨겨진다.
white-space: nowrap : 전체 문단을 한 줄로 표시해주는 역할
overflow: hidden : 영역 밖을 넘어간 글자들을 숨겨주는 역할
text-overflow: ellipsis : 영역 밖을 넘어가면 말줄임표 ( "..." ) 추가하는 역할
.textBox { width: 300px; padding: 14px; border: 1px solid #000; /* 추가 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
여러 줄로 제한하기
2줄 이상의 글에 마지막에만 말줄임표를 적용하고 싶으면 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; 스타일을 추가하면 된다.
overflow: hidden : 영역 밖을 넘어간 글자들을 숨겨주는 역할
text-overflow: ellipsis : 영역 밖을 넘어가면 말줄임표 ( "..." ) 추가하는 역할
display: -webkit-box : 플렉스 박스를 구현하기 위해 웹킷 엔진에서 사용하는 속성
-webkit-box-orient: vertical : flexible box의 흐름 방향을 지정하는 속성 (vertical: 세로, horizontal: 가로)
-webkit-line-clamp: 3 : 텍스트 라인 수
.textBox { width: 300px; padding: 14px; border: 1px solid #000; /* 추가 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
문제는 영역에 padding이나 height 값을 추가하면 말줄임표 이후에 글씨들이 보인다.
라인 수 제한을 걸어야 하는 태그에 부모 태그(<div></div>)를 추가하고 부모태그에 padding이나 height 스타일을 주면 된다.
<html lang="en"> <head> <style> .center { display: flex; align-items: center; justify-content: center; height: 100%; } /* 추가 */ .padding { padding: 14px; border: 1px solid #000; } .textBox { // padding 값 없음 width: 300px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } </style> </head> <body> <div class="center"> <div class="padding"> <!-- 추가 --> <p class="textBox"> The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </p> </div> </div> </body> </html>
참고