CSS를 이용한 말줄임 처리 방법

 

말줄임 처리란?

말줄임 처리는 말 그대로 내용의 길이가 길어졌을 때 일정 부분만 보여주고 '...' 과 같은 표시로 뒤에 더 내용이 있다는 것을 표현해주는 처리입니다.

시각적으로 너무 많은 내용을 보여주면 가독성도 떨어지고, 디자인적 통일성을 떨어트리게 되기 때문에 많은 웹서비스에서 필수적으로 사용하고 있는 기능입니다.

일반적으로 말줄임 처리라고 하면 아래와 같이 한줄 말줄임 과 여러줄 말줄임 이렇게 두가지가 있다고 생각합니다.

See the Pen ZEQzMqN by 13akstjq (@13akstjq) on CodePen.

 

 

하지만 이제는 웹에서 발생하는 수많은 케이스에도 동일한 UI를 제공할 수 있도록 대응 가능한 말줄임 처리가 많이 필요해진 것 같습니다. 

 

 

---

1. 고정 사이즈 요소가 좌측에 올 때

많은 곳에서 볼 수 있는 형태의 카드 입니다. 왼쪽에 고정 사이즈 이미지가 배치되어있고 오른쪽에는 텍스트가 나와서 제목은 한 줄 , 내용은 여러줄 말줄임을 처리하는 상황입니다.

1.1 float

See the Pen 고정요소와 말줄임요소 by 13akstjq (@13akstjq) on CodePen.

 

 

```html

 

한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임

여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다. 여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다.

```

 

.text_area { 
  overflow : hidden;
  padding-left : 10px;
}

/* 한줄 말줄임  */
.ellipsis { 
  overflow : hidden; 
  text-overflow : ellipsis; 
  white-space : nowrap;
  display : block;
}

/* 여러줄 말줄임 */ 
.ellipsis_2 { 
  display : -webkit-box;
  overflow : hidden;
  text-overflow : ellipsis;
  -webkit-line-clamp : 2; 
  -webkit-box-orient : vertical;
}

float:left를 통해 이미지를 배치할 경우 다음에 오는 요소에 overflow : hidden 속성을 추가하면 BFC를 생성해 고정이미지 사이즈를 제외한 영역을 차지하게 되어 말줄임 요소의 공간이 정해지기 때문에 별다른 이슈 없이 말줄임이 됩니다. IE 대응도 걱정할 필요가 없어 해당 레이아웃일 때는 float 를 사용해서 말줄임 하는 것이 가장 편해보입니다.

1.2. flex

See the Pen 고정요소 말줄임 flex by 13akstjq (@13akstjq) on CodePen.

 

 

```html

 

한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임

여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다. 여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다.

```

.flex { 
  padding : 5px; 
  border : 2px solid #000;
  display : flex;
}

.img { 
  flex : 0 0 70px;
  height : 70px;
  background-color : rgba(255,0,0,0.5);
}

.text_area { 
  flex  : 0 1 auto;
  padding-left : 10px;
  overflow : hidden;
}

Flex로 처리할 때는 텍스트를 감싸는 text_area 클래스에도 overflow : hidden 을 넣어줘야합니다. 넣지 않게 되면 아래처럼 말줄임이 정상적으로 동작하지 않습니다.

flex는 IE를 완벽히 지원하지 않기 때문에 모바일 서비스에서는 사용해도 문제가 없긴 하지만, 웹에서는 브라우저 대응 범위를 확인한 후에 사용해야할 것 같습니다.

 

1.3 table

See the Pen XWXrywx by 13akstjq (@13akstjq) on CodePen.

 

 

```html

 

한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임

여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다. 여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다.

```

.table { 
  width : 300px;
  display : table;
  border : 1px solid #000;
  padding : 10px;
  box-sizing : border-box;
}

.cell { 
  display : table-cell;
}

.cell:nth-child(1) { 
     min-width : 70px;
  height : 70px;
  background-color : rgba(255,0,0,0.5);
  }

.ellipsis_1 { 
  display : -webkit-box;
  overflow : hidden;
  text-overflow : ellipsis;
  -webkit-line-clamp : 1; 
  -webkit-box-orient : vertical;
}

.ellipsis_2 { 
  display : -webkit-box;
  overflow : hidden;
  text-overflow : ellipsis;
  -webkit-line-clamp : 2; 
  -webkit-box-orient : vertical;
}

table로 말줄임 처리할 때는 기존 한줄 말줄임으로 처리할 수 없어서 여러줄 말줄임 처리하는 방법으로 1줄 말줄임 또한 처리해야합니다. 그래서 IE를 대응해야하는 상황에서는 사용할 수 없습니다. 그리고 display : table-cell 을 사용해야하기 때문에 구조가 복잡해지는 단점도 있습니다.

---

2. 고정 사이즈 요소가 우측에 올 때

2.1 float

위 사진처럼 고정 사이즈 이미지가 우측에 올 경우에는 좌측일 경우보다 신경써야할 것이 생깁니다.

좌측일 경우 float : left 를 사용했으니 float : right 를 사용할 수 있지만 이 경우는 접근성 이슈 를 고려해야합니다.

<div class="container">
  <div class="wrap clear">
    <div class="img"></div>
   <div class="text_area">
     <span class="title ellipsis">한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임</span>
     <p class="text ellipsis_2">
       여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다. 여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다.
     </p>
    </div>
  </div>
</div>

마크업상 순서가 상관이 없는 경우에는 float : right 로 처리가 가능하지만 아래 처럼 내용을 읽고 버튼을 클릭해야하는 상황이라면 접근성 이슈가 발생하기 때문입니다.

이런 이슈가 없다면 나머지 구조는 동일한 채로 float : right 를 사용해서 작업할 수 있습니다.

 

2.2 absolute

absolute를 이용한 해결 방법은 '고정 사이즈' 일 경우에만 사용 가능합니다.

말줄임이 필요한 요소에 padding-right 를 고정이미지 너비 만큼 주고, 고정이미지를 position : absolute 로 항상 오른쪽에 위치하게 하면 해결할 수 있습니다.

See the Pen LYGPMZY by 13akstjq (@13akstjq) on CodePen.

 

 

```html

 

한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임한줄 말줄임

여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다. 여러줄 말줄임 테스트입니다.여러줄 말줄임 테스트입니다.

```

.text_area { 
  padding-right : 80px;
}

.img { 
  position : absolute;
  top : 0;
  right : 0;
  width : 70px;
  height : 70px;
  background-color : rgba(255,0,0,0.5);
}

/* 한줄 말줄임  */
.ellipsis { 
  overflow : hidden; 
  text-overflow : ellipsis; 
  white-space : nowrap;
  display : block;
}

/* 여러줄 말줄임 */ 
.ellipsis_2 { 
  display : -webkit-box;
  overflow : hidden;
  text-overflow : ellipsis;
  -webkit-line-clamp : 2; 
  -webkit-box-orient : vertical;
}

2.3 flex & table

Flex와 table은 좌측, 우측에 상관없이 방법이 동일하기 때문에 넘어가도록 하겠습니다.

3. 가변 요소일 경우 말줄임 처리

가변 사이즈 요소와 고정 사이즈 요소의 차이점은 2.2 absolute 방법을 제외하고는 모두 동일하게 사용할 수 있습니다.