CSS - 넘치는 텍스트 자르는 속성

줄바꿈을 하지 않을 때 기준선을 벗어나 넘치는 텍스트를 어떻게 처리할지를 지정하는 속성입니다.

넘치는 텍스트를 잘라낼지 아니면 말 줄임표(...)로 처리할지를 결정합니다. 단 이 속성에는 white-space 와 overflow 속성이 필요합니다.

값	설 명
clip	넘치는 텍스트를 자름.
ellipsis	넘치는 텍스트를 자르고, 말 줄임표(…)를 붙임
문자열	사용자 정의 문자열

<style>
.hh1 {
  white-space: nowrap;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}
.hh2 {
  white-space: nowrap;
  width: 50px;
  overflow: hidden;
  text-overflow: "***";
  border: 1px solid #000000;
}
</style>

<h6 class="hh1">하보니 PHP</h6>
<h6 class="hh2">하보니 PHP</h6>

다음은 결과 화면입니다.

하보니 PHP

하보니 PHP