제이쿼리&CSS 말줄임 스크립트로 처리하는 방법 / Ellipsis Using Css & J-query

 

 

 

문장이 길어질 경우 '...' 표시가 되도록 설정하는 방법에 대해 정리한다.

CSS를 이용해서 많이 사용하는데 간혹 스크립트를 써야할때 있어서

이왕 정리할때 다 정리하려고 한다.

 

 

 

1. CSS

- 1줄 말줄임표 설정하기

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

 

- 2줄 말줄임표 설정하기

p{
  overflow: hidden;
  display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

 

< Example >

See the Pen make Ellipsis using CSS by chloe Kim (@chlolisher) on CodePen.

 

 

---

 

 

 

2. 제이쿼리(J-Query)

< HTML >

 <select id="selectBox">
	<option selected="selected">옵션 리스트 01</option>
	<option>옵션 리스트 02</option>
	<option>옵션 리스트 03</option>
	<option>옵션 리스트 04</option>
</select>

< Script >

$('#selectBox > option').each(function(){
	var length = 6; //표시할 글자 수 정하기

$(this).each(function(){
  if($(this).text().length >= length){
    $(this).text($(this).text().substr(0, length) + '...');	//지정한 글자수 이후 표시할 텍스트 '...'
    }
  });
});

 

< Example >

See the Pen zYZKjgE by chloe Kim (@chlolisher) on CodePen.

 

 

 

 

이렇게 셀렉트박스(select box)에도 말줄임표 사용 가능하다.

자바스크립트로 짜게되면 다시 여기에 더 추가할 예정이다.