한줄에서 넘치는 글자 '...' 으로 생략하기

아래 사진 AAAA hash값 처럼 표시되는 글자가 넘칠 때, 넘치는 부분을 '...' 표시로 생략하고 싶을 때가 있다. 
어떻게 할 수 있는지 알아보자.

목표

나의 목표는 아래 사진의 AAAA hash 칼럼에서 한 줄을 넘어가는 text들은 모두 '...'으로 표시 하는 것이다.

 

 

Solution

아래 CSS 코드를 이용해 한 줄만 출력하고, 넘치는 부분은 '...' 으로  깔끔하게 표현 할 수 있다.

 

.hash__wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

---

위의 코드의 뜻을 쉽게 말하면,

Text가 넘치든 말든 한줄로 표현하고(white-space: nowrap),

만약 넘친다면 숨기는데(overflow: hidden),

넘친다는 것을 줄임 표시로 표현(text-overflow: ellipsis)하라

라는 뜻이다.

---

overflow

요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때, 그 처리방법에 대해 정의하는 속성

• visible: 넘치는 콘텐츠를 자르지 않고, 요소의 블록 서식 맥락 바깥에서 표현 (default value)
• hidden: 넘치는 콘텐츠를 안쪽 여백 상자에 맞도록 자른다.
                이때 잘라진 내용을 보기 위한 스크롤 바를 제공하지도 않고, 스크롤 할 방법 역시 제공하지 않는다.
                (단, 코드를 이용한 스크롤 가능)
• clip: hidden과 마찬가지로, 넘치는 콘텐츠를 자르고 스크롤 방법, 스크롤 바를 제공하지 않으며, 코드를 이용한 스크롤도 불가하다.
• scroll: 콘텐츠를 안쪽 여백 상자에 맞도록 자르며, 스크롤바를 제공한다.
             이때 스크롤바는 실제로 콘텐츠를 잘랐는지 여부와 무관하게 항상 제공되게 된다.
• auto: 사용자 에이전트(즉, 브라우저)가 정한다. 
            콘텐츠가 안쪽 여백 상자안에 들어 갈 수 있다면, visible과 동일하게 보이지만, 넘친다면 scroll 바를 제공하게 된다.

 

** 주의점: overflow 속성이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너의 높이(height 또는 max-height)를 설정하거나,    
                  white-space를 nowrap으로 설정해야 한다.

---

text-overflow

흘러넘친 콘텐츠를 사용자에게 표현하는 방법 대해 정의 하는 속성

• clip: 콘텐츠 영역의 한계에서 텍스트를 자르므로 문자가 중간에서 잘릴 수 있다. (default value)
• ellipsis: 잘린 텍스트를 줄임표('...')를 이용하여 표시한다. 만약, 줄임표를 표현할 공간마저 부족하다면, clip된다.

---

white-space

요소가 공백문자를 처리하는 방법에 대해 정의하는 속성

• normal: 한 줄이 너무 길어서 넘칠 경우, 자동으로 줄을 바꾼다. 공백들을 하나로 합침, 개행 문자도 다른 공백문자와 동일하게 처리
• nowrap: 공간을 넘어가더라도 한줄로 표현하게 된다. 공백들을 하나로 합치며, 줄 바꿈은 <br>요소에서만 일어나게 된다.