[CSS] 텍스트 점으로 표시하기

넘치는 텍스트 점으로표시

넘치는 텍스트를 점으로 표시해주는 소스입니다. 

한줄일때 점으로 표시하는 방법과

여러줄일때 점으로 표시하는 방법이 있습니다.

단,

1. width가 고정적으로 되어있어야지 잘 됩니다.

2. 한줄일 경우에는 아래줄로 내려가는 것을 막기위해 white-space: nowrap 등이 필요합니다.

3. overflow: hidden; 을 사용해 영역을 안보이게 숨겨주어야 합니다.

4. 테이블에 적용시에는 table-layout:fixed;를 테이블에 넣어줘야 합니다.

5. IE는 테이블에서는 table-layout:fixed도 잘 안먹히는것 같습니다. 상황에 따라서 display: block; 또는 display: inline-block으로 설정해서 사용해야 합니다.

밑에 소스로 하면 익스쪽에서는 점으로 나오지 않고 그냥 안보이게 표시된다....

연습소스

css

div {
  width: 200px;
  border: 1px solid red;
}

#div_1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
}

#div_2 {
  /* 한 줄 자르기 */
  display: inline-block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 여러 줄 자르기 추가 스타일 */
  white-space: normal;
  line-height: 1.2;
  height: 3.6em;
  text-align: left;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
 

html

<div>우리 한때 자석 같았다는 건 한쪽만 등을 돌리면 멀어진다는 거였네.
가진 게 없던 내게 네가 준 상처 덕분에 나도 주인공이 돼보네 in a sad love story.</div>
<div id="div_1">우리 한때 자석 같았다는 건 한쪽만 등을 돌리면 멀어진다는 거였네.
가진 게 없던 내게 네가 준 상처 덕분에 나도 주인공이 돼보네 in a sad love story.</div>
<div id="div_2">우리 한때 자석 같았다는 건 한쪽만 등을 돌리면 멀어진다는 거였네.
가진 게 없던 내게 네가 준 상처 덕분에 나도 주인공이 돼보네 in a sad love story.</div>
 

https://jsfiddle.net/chjs7290/fdyh0hbd/

참고 http://webdir.tistory.com/483