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

가끔 글이 엄청 길어져서 줄이거나 간추리고 싶어졌을 때

 

 

한 줄로 만들거나

 

넘어가기 전 글자를 자르거나

 

 

한 줄로 넘어가기 전 글자를...으로 표현할 수 있다.

 

여러 줄에서 넘어가기 전 글자를 ...으로 바꿀 수 있는 방법은

.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줄을 보여주고,
플랙스 방향은 수직이다.