[html, css] 한줄 말줄임 , 여러줄 말줄임(2줄, 3줄....)

1줄 말줄임 css

<p class="txt">
	봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 
</p>

.txt { 
  display: block; /* display:inline 가능 */
  width: 300px; /* 가로값 지정(100% 가능) */
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

 

여러줄 말줄임 css

ie에서는 ... 말줄임이 나타나지 않고 끊깁니다. (브라우저 특성입니다.)

 

<p class="txt2">
	봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 봄이 찾아오는 블로그 입니다. 
</p>

.txt2 {
  position:relative;
  width:300px;
  overflow: hidden; 
  white-space: normal;
  text-overflow: ellipsis;
  line-height: 1.2; 
  height: 3.6em; /* line-height * 줄의수 */
  text-align: left; 
  word-wrap: break-word; 
  display: -webkit-box; 
  -webkit-line-clamp: 3; /* 줄의 수 */
  -webkit-box-orient: vertical;
}

 

ie 에서 꼭 말줄임을 넣어주어야한다! 라고 하시는 분!

아래의 코드를 넣어주어야 ie에서 사용가능합니다.

(추가로 ie 에서만 css 적용되게 해주시면 ie에서만 보여지게 할수도 있습니다.)

/* ie전용 추가 말줄임 */
.txt2:before {
  content:'...';
  position:absolute;
  bottom:0;
  right:2.5%; /* 배경색넓이 */
  background:#fff; /* 배경색과 통일 */
  letter-spacing: 1px; /* 말줄임간격 */
}