css 말줄임(text-overflow:ellipsis) 이 적용되지 않을때.

우선 적용하는 방법은 검색하면 나올테고..ㅋㅋ

저도 오늘 적용하는데 잘 안되더라구요.

 

이때 체크해봐야될 부분이 있는데요.

 

1. width가 제대로 지정되어 있는가

2. block태그이거나,그렇지 않다면 display:block 이 되어 있는가?(flex도 안됨)

3. 글자가 width를 넘어가는 조건을 충족시켰는가?

 

저는 1줄기준으로 ellipsis처리하는 예제만 준비했습니다.

.line1-ellipsis {
display: block;/* 블록태그로 만들어준다 */
text-overflow: ellipsis;/* 말줄임 css */
white-space: nowrap;/*글자를 한줄로 모아준다*/
overflow: hidden;
background:pink;/*실제 글자 영역 상태 확인하기 위함*/
}

<div
  class="line1-ellipsis"
>
<!--내용 -->
</div>

 

아래는 결과입니다.