텍스트 크기 지정되어 있을때 생략기호 text-overflow: ellipsis;

텍스트에 생략 기호 사용하기

text-overflow: ellipsis;

text-overflow를 구현하기 위한 조건

1. width or height 고정적
2. overflow: hidden; 사용해 영역을 숨길 것
3. 아래 줄로 내려가는 것을 막기 위하여 white-space: nowrap 등등 이 필요함

위의 코드는 html 코드입니다. 여기에 css를 사용해 고정된 width 100px을 넘을 경우에는 텍스트가 절리며 생략기호를 사용되도록 하려면?? 아래의 css를 적용합니다.

@ text-overflow.css

span cssstyle {
  width: 150px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

text-overflow 속성은 display 속성이 블럭 형태인 경우에만 적용됩니다.
inline의 경우는 적용되지 않습니다.

body span {
    display: block;  // inline-block으로 설정 필요
}

text-overflow 속성은 IE 6 이상 지원