css로 말줄임 만들기 /ellipsis '...'/ 한줄, 두줄이상

공지사항 예시 화면

공지사항, 게시판, 댓글 등의 기능 구현할 때
사용하게 되었던 CSS 속성 중 하나인,
넘치는 글 숨기기

 

한줄 말줄임

 

html

    <span class="ellipsis boxStyle">
        신사숙녀 여러분 안녕하세요!
    </span>

css

        .boxStyle{
            display: inline-block;
            width: 200px;
            padding: 10px;
            border: solid 1px #000;
        }
        
        .ellipsis{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
        }

 

overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기
white-space: nowrap; : 줄바꿈이 없어짐
text-overflow: ellipsis; : ... 말줄임 효과
word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨

 

결과

결과

 

두줄이상 말줄임

기존 한줄 말줄임에 사용한 white-space: no-wrap; 속성은 꼭 제거해주셔야 합니다!

 

html

    <span class="ellipsis2 boxStyle">
        안녕하세요! 감사해요! 잘있어요! 다시만나요~ 아침해가 뜨면 매일같은 사람들과 또다시 새로운 하루 일을 시작해~
    </span>

 

css

        .boxStyle{
            display: inline-block;
            width: 200px;
            padding: 10px;
            border: solid 1px #000;
        }

        .ellipsis--line2{
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: keep-all;
        }

display: -webkit-box; : 해당 영역을 box 형태로 관리

-webkit-line-clamp; : 영역 내의 컨텐츠의 최대 라인수를 결정 / IE에서 적용되지 않음!

-webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 지정

 

결과

결과

앗! 이상하죠?!

이럴때 높이 값을 지정하면 되지만 높이값을 지정하면 안되는경우도 있을거예요!

이럴때 html구조를 좀 변경해야 합니다.

 

html

 

    <span class="boxStyle">
        <span class="ellipsis2">안녕하세요! 감사해요! 잘있어요! 다시만나요~ 아침해가 뜨면 매일같은 사람들과 또다시 새로운 하루 일을 시작해~</span>
    </span>

 

결과

결과

 

 

 

 

추가내용 및 참고사이트

https://deeplify.dev/front-end/markup/text-ellipsis