관리 메뉴

I LOVE EJ

영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기 [출처] 영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기|작성자 Smile 본문

Web publishing/HTML & CSS

영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기 [출처] 영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기|작성자 Smile

BeOne 2013. 4. 22. 14:36

영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기!!

 

예를 들어

 

<div>

   <ul>

       <li class="ellipsis">영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기!!</li>

   </ul>

</div>

 

저렇게 코딩을 하고 말줄임까지 나오고 나머지는 ...으로 나오게 하기 위해서는 html 마크업을 마친 후 css로 넘어와서

 

.ellipsis {

width:250px;       // 이 부분은 디자인된 길이에 따라서 변경이 가능합니다.

display:inline-block;

text-overflow:ellipsis;  //잘라지는 부분에 자동으로 ...을 넣어주는 속성입니다.

overflow:hidden;

white-space:nowrap;

}

 

이렇게 지정을 해주시면 간단하게 해결하실 수 있습니다.

'Web publishing > HTML & CSS' 카테고리의 다른 글

-webkit-appearance: none;  (0) 2013.06.13
제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다.  (0) 2013.05.08
메타태그 활용법 <meta>  (0) 2013.04.04
meta 테크 활용  (0) 2013.04.04
이메일에서 사용할 수 있는 CSS  (0) 2013.03.28