말 줄이기 ellipsis

한줄 글자수 제한

.text {
    width:100px; /* %도 가능함 */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

– Block레벨 테그에서만 적용이 됩니다.
– overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함
– text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함
– white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능)

여러줄 글자수 제한

.text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: box;
      margin-top:1px;
      max-height:80px;
      overflow:hidden;
      vertical-align:top;
      text-overflow: ellipsis;
      word-break:break-all;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3
  }