[CSS] 말줄임표(...) - ellipsis

글이 길어질 경우 자연스럽게 잘리고, 내용이 더 있다는 것을 표시하기 위해 말줄임표를 사용한다.

특정 길이만큼 자르고 직접 ...를 붙여서 보여줄 수도 있지만 고정 길이라는 한계가 있어서 UI에 유동적으로 보여줄 수 없다.

하지만 CSS를 사용한다면 고정된 길이로 자를 필요 없이 말줄임표를 쉽게 보여줄 수 있다.

상황을 만들어보자.

<style>
.ellipsis {
  width: 200px;
  background-color: yellow;
}
</style>

<div class="ellipsis">안녕하세요. 길이가 너무 긴 텍스트 입니다.</div>

예시를 들기 위하여 너비를 200px만큼 주고 내부의 긴 텍스트를 작성하였더니 위 그림과 같이 두줄로 나오게 된다.

우리는 텍스트가 여러 줄이 될 경우 말줄임표를 보여주고 싶다.

그러기 위해서는 여러 개의 속성을 주어야 한다.

 

1. white-space: nowrap; - 텍스트를 한 줄로 보이게 한다.

<style>
.ellipsis {
  width: 200px;
  background-color: yellow;

  white-space: nowrap;
}
</style>

2. overflow: hidden; - 박스에서 넘어가는 부분에 대해서 보이지 않게 한다.

<style>
.ellipsis {
  width: 200px;
  background-color: yellow;

  white-space: nowrap;
  overflow: hidden;
}
</style>

3. text-overflow: ellipsis; - 넘어가는 텍스트에 대해 말줄임 효과를 넣는다.

<style>
.ellipsis {
  width: 200px;
  background-color: yellow;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

 

 

마지막 예시와 같이 세개의 속성을 모두 작성해주면 CSS로 쉽게 말줄임표를 적용할 수 있다.