CSS - 텍스트가 넘칠때 생략하기 (말줄임)

 

Updated 08/01/22

 

css 를 사용하다 보면 은근히 텍스트를 생략해야 할 때가 많다.

지난번에도 UI 작업하다가 버튼 안의 텍스트가 너무 길어 버튼 영역이 망가져 버렸다.

이럴때 너무 텍스트가 길면 ... 으로 생략되도록 css 를 사용하여 만들어보자.

 

---

CSS - 텍스트가 넘칠때 생략하기

 

text-overflow 라는 속성을 사용하면 된다.

 

overflow 속성으로 영역 안에 내용이 많아서 넘칠 때, 종종 스크롤 바를 사용했다. 오버플로우는 흘러넘치는 영역을 제한하는 속성이다.

text-overflow 속성도 비슷하다. 문장이 넘쳐흐를 때 생략할 수 있다. 

 

text-overflow 의 조건 

text-overflow 속성을 사용하려면 몇 가지 조건이 만족되어야 동작한다. 그렇지 않으면 생략 기호로 나타나지 읺을 수 있다. 

i. width 또는 height가 고정적일 것
ii. overflow: hidden; 을 사용해 영역을 감출 것
iii. 아래줄로 내려가는 것을 막기위해 white-space: nowrap 등이 필요

+ 추가) 부모 요소의 display 속성이 block이여야 한다. 왜냐하면 text-overflow 속성은 블럭형태인 경우에만 적용되기 때문이다.

 

 

 

💡 1 줄 줄이기

다른 분의 블로그에서 참고한 예제를 먼저 살펴보자.

 

HTML

일단 간단한 태그를 넣어주었다.

<div>
  <p>이렇게 긴 경우 생략기호가 필요한...</p>
</div>

 

CSS

div p {
  overflow: hidden;  		// 을 사용해 영역을 감출 것
  text-overflow: ellipsis;  	// 로 ... 을 만들기 
  white-space: nowrap; 		// 아래줄로 내려가는 것을 막기위해
  word-break:break-all
  width: 100px;
  height: 20px;
}

 

실행결과

이렇게 긴 경우 생략...

 

 

 

 

위의 내용을 바탕으로 실제로 적용한 예제이다.

HTML

버튼 안에 텍스트의 수가 제한되어 있어서 예쁘게 생략해달라는 디자이너님의 요청이 있었다 ~ 

<div>
  <span class="selectbtn">궁금하신 내용을 선택해주세요.</span>
<div>

 

CSS

하지만 위의 예제처럼 적용이 되지 않아 한참을 헤매였다. 항상 이유를 찾다보면 몇글자가 달라서이다🥲

display 속성이 blcok 이어야 text-overflow 속성이 잘 동작한다는 것이다. 

텍스트는 보통 <span> 이나 <p> 태그에 잘 쓴다. 얘네들은 inline 요소다. 그렇기 떄문에 속성 지정을 block 으로 변경해주고 나서야 비로소 잘 동작하게 되었다.

body span {
    display: block;  // inline-block으로 설정 필요
}
.selectbtn {
  max-width: calc(100% - 38px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

 

실행화면

성공적으로 생략기호가 잘 들어갔다.

 

 

💡 2 줄 줄이기

CSS

위의 내용을 두줄로 줄여보자.  -webkit-box 속성을 사용해보았다.

 

• display: -webkit-box 속성은 해당 영역을 box 형태로 관리된다.
• -webkit-line-clamp 속성은 영역 내의 컨텐츠의 최대 라인수를 결정한다.
• -webkit-box-orient: vertical 속성은 영역 박스의 내의 정렬을 수직으로 만든다.

body span {
    display: block;  // inline-block으로 설정 필요
}
.card {
  max-width: calc(100% - 38px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; // 얘네를 추가히준다
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

 

 

 

결과화면

두 줄로 잘보인다 ~

 

 

 

 

ref: webisfree.com/2015-08-17/[css]-text-overflow-%ED%85%8D%EC%8A%A4%ED%8A%B8%EA%B0%80-%EB%A7%8E%EC%9D%80-%EA%B2%BD%EC%9A%B0-%EC%83%9D%EB%9E%B5%EA%B8%B0%ED%98%B8%EB%A1%9C-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B8%B0

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