[css3] text-overflow - 넘치는 텍스트 블러 처리하기

text-overflow

텍스트 오버플로우는 white-space를 이용하여 줄 바꿈을 하지 않고도 한줄로 텍스트를 처리하게 하는 속성인데,

 

over-flow가 발생하도록 강제하지 않아서 긴 줄의 텍스트가 넘어가는 것을 방지할때 사용하기 좋은 속성이다.

 

굳이 해당 컨텐츠에 모든 내용을 다 보여줄 필요가 없고, 다른 컨텐츠들도 같이 병행적으로 보여줘야 하는 경우가 생길때, 

 

사용하기 좋은 옵션이다.

 

혼자만 사용할 수는 없고,

 

overflow 속성이 hidden, scroll, auto 로 놓고서

 

whitespace 가 nowrap인 경우에 사용이 가능하다.

 

즉, 3가지 속성을 한번에 같이 쓴다고 생각하면 편하다.

 

이렇게.

 

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

 

예시를 들면,

CSS 코드

div {
  background-color: orange;
  font-size: 30px;
  padding: 20px;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border: 4px solid red;
  box-sizing: 4px solid red;
  backdrop-filter: blur(4px) grayscale();
}

HTML 코드

<div>
  BTS (Korean: 방탄소년단; RR: Bangtan Sonyeondan; lit. Bulletproof Boy Scouts), also known as the Bangtan Boys, is a South Korean boy band who were formed in 2010.
</div>

 

결과 화면