생략 부호(ellipsis) CSS 적용 :: 마이구미

이번 글은 CSS를 통해 생략 부호에 대한 적용법을 다뤄본다.

생략 부호는 텍스트가 노출 범위를 넘었을 때, 일반적으로 이용한다.

예를 들면, 아래와 같은 경우가 된다.

위에서 보이는 "..." 이 생략 부호가 된다.

대부분 생략 부호를 사용할 때는, 라인 수를 정하고 싶은 경우가 있다.

텍스트의 길이에 상관없이, 노출 영역에 있어, "2줄 이상이면, 생략부호, 3줄 이상이면 생략부호" 이런 식으로 말이다.

이러한 생략 부호를 구현 할 수 있는 방법은 크게 2가지가 된다.

• text-overflow: ellipsis
• 가상클래스 before, after

위 2가지 방식을 활용해보자.

1. text-overflow

width: 300px;
display: -webkit-box;
-webkit-line-clamp: 2; // 생략 부호가 적용되는 라인 수
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

웹킷 기반 브라우저는 위 속성들로 구현이 가능하다.

웹킷 기반이 아닐 경우에는 웹킷에서 제공하는 속성들을 당연히 안 먹히게 된다.

width: 300px;
display: block; /* Fallback for non-webkit */
display: -webkit-box;
-webkit-line-clamp: 2;
height: 2em; /* Fallback for non-webkit */
-webkit-box-orient: vertical;
line-height: 1em;
overflow: hidden;
text-overflow: ellipsis;

크게 line-clamp이 안 먹히기 때문에, height를 통해 방지해야한다.

height는 (line-height * line-clamp 수)을 해주면 된다.

CODEPEN 링크 (text-overflow: ellipsis)

2. 가상클래스 (before, after)

h2:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

h2:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  background-color: #f7f5eb;
}

가상클래스의 before는 생략 부호를 위함이고, after는 생략 부호가 필요하지 않을 경우를 위함이다.

텍스트의 길이가 노출 범위를 넘어가면 after 영역은 범위가 넘은 곳에 위치한다.

그렇지 않다면, before, after 위치가 같게 되어 가려지게 된다.

그림을 통해 확인해보면 아래와 같은 맥락이다.

  

자세한 건, 아래 링크를 통해 확인하자.

CODEPEN 링크 (가상 클래스 before, after)

아래 이미지에서 보면, 유튜브 또한 1번 방식을 사용하고 있다.

1번 방식이 일반적으로 사용하는 방법이다.

목적에 따라, 조금 유연한 방식은 가상클래스를 활용하는 방법이 될 수 있다.