텍스트 길어질 때 자동 ...표시하기 / 텍스트 뒤 ... 표시하기

문자열이 정해진 영역 넘칠 때... 표시하기

<p> ... </p>

p {
display: -webkit-box;
width: 100%; 
height: 20px; 
white-space: normal; 
text-align: center; 
-webkit-line-clamp: 1; // ...표시할 줄
-webkit-box-orient: vertical;
overflow: hidden; // 영역 밖은 숨기기
text-overflow: ellipsis;
font-size: 14px;
font-weight: 600;
}

여기서 -webkit-line-clamp: 1만 변경하면 원하는 줄에서 ...표시를 할 수 있다.

너비와 높이를 정해주는 것은 텍스트가 늘어남에 영역이 넓어져 모든 글자가 표현되는 걸 방지하기 위해 지정해줬다.
그리고 영역 밖을 hidden으로 숨겨주는데, 어떻게 보면 진짜 생략되는 건 아니고, 영역을 벗어나면 ...를 표시하고 영역 밖에 text를 가린다고 보는게 맞을 것 같다.
그렇다 보니 영역을 잘못 지정할 경우 넘어가야 할 텍스트의 일부가 보이는 상황이 있을 수 있다.

내가 표시할 텍스트 줄의 따라 -webkit-line-clamp: 표시할 줄 만 변경하면 된다.

 

---

만일 반응형이나 어떤 크기가 줄어듬에 따라 변경하는 속성이 아니라면
예를 들어 어떤 글에 소개글? 일 경우에는 slice로 문자열을 원하는 길이로 자르고 뒤에 ...를 추가하는 JS 코드로 구현 할 수 있다.