HTML/CSS 여러 줄 텍스트 넘칠 때 숨기기... 생략

HTML에서 텍스트가 너무 길어서 넘칠 때 잘 처리하는 방법에 대해서 알아볼게요. (여러 줄)

바로 예제를 통해 확인해보도록 하죠.

 

실제로 기능과 크게 상관이 없는 css 속성들은 div 태그 안에 박아둘게요. (height 수치만 잘 기억해주세요.)

 

<div class="box" style="width: 200px; height: 200px; background: #F78181; font-size: 20px;">
    텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트
</div>

 

아래 사진처럼 보일거에요.

 

 

우리는 한정된 빨간 박스 안에 텍스트를 미리보기 형태로 줄여놔야해요.

이쁘게 정리해볼게요.

 

height는 위에서 적었지만 이해를 돕기 위해 다시 한 번 적을게요.

height가 200px이니깐 line-height를 40px를 주면 5줄이 박스 안에 담겨요.

overflow는 div 내에 컨텐츠가 초과되었을 때 어떻게 하겠냐는 속성이에요. hidden으로 설정해서 벗어나는 컨텐츠는 모두 숨겨버릴게요.

display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; 속성은 다섯번째 줄에 ...을 붙이겠다는 거에요.

-webkit-line-clamp: 3; 을 주면 세번째 줄에 ...이 붙어버려요.

 

.box {
    height: 200px;
    line-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

 

 

 

-webkit 관련 속성은 구형 브라우저에서 지원하지 않을 수 있어요.

아래 사이트에서 어디까지 지원하는지 알아보고 필요하다면 다른 방법을 찾아보는 게 좋겠네요.

위의 방법은 왠만한 브라우저에서는 거의 동작하니 크게 문제는 없을 것으로 보입니다.

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

 

 

 

한 줄 형태로 생략하고 싶은 경우는 아래 글을 참고해주세요.

https://gofnrk.tistory.com/27

HTML/CSS 한 줄 텍스트 넘칠 때 숨기기... 생략