css 여러 줄, 넘치는 글자 숨기기

가끔 글이 엄청 길어지는데 겉으로는 안보이게 자르거나 ...으로 표현하고 싶다.

.text {
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
}

한 줄로 표현 하되 width가 200px를 넘어가지 않는다.

여기에

text-over-flow: ellipsis;

를 추가하면

잘리는 마지막 곳에 ...이 생긴다.

------여기까지가 한 줄-------

.text {
display: inline-block;
width: 200px;
white-space: normal;
overflow: hidden;

line-height: 1.2;
height: 3.6em;
text-align: center;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

}

한 줄 높이를 1.2로,
총 3줄인 3배 3.6em의 높이를 주겠다.
텍스트는 중간으로 가게하고,
단어 단위로 잘라버리고,
여백과 유연한 높이를 위해 플렉스 박스로,
3줄을 보여주고,
플랙스 방향은 수직이다.