css 공부 : 텍스트 ".." 처리

텍스트 "..." 하기

css 속성 text-overflow 속성값 ellipsis 으로 텍스트를 생략합니다.

<p>
  텍스트 흘려 넘치면 ... 생략시켜주는 코드
</p>

p {
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

코드설명

width: 500px 가로사이즈를 정하면 500px 안에서 줄바꿈이 됩니다. 텍스트가 한 줄로 생략되서 나타나게 해주기 위해 텍스트를 다시 줄바꿈 하지 않도록 white-space: nowrap; 작성하면 500px 안에 있는 텍스트가 줄바꿈이 되지않고 한줄로 나타납니다. 500px 안에서 생략되서 나타나게 해줘야 하기 때문에 overflow:hidden; 으로 잘라버립니다. 잘라내면 500px 안에서만 텍스트가 보입니다. 텍스트를 생략하기 위해 text-overflow:ellipsis; 사용합니다.