유동적인 Width 에서 글자(최신글 등) 쉽게 자르기

아시는분들 많으시겠지만, 모르시는 분들을 위해서..

text-overflow: ellipsis 를 활용한 글자 자르기.

모바일 버전이나 반응형 등을 작업할때

최근게시물 등의 글자를 잘라야되는데 Width가 100% 이거나 유동적일때

고정되어 잘린 글자수를 보고 난감한 경우가 옵니다. 분명히

이럴때 간단하게 CSS로 가로폭에 맞추어서 잘라줄 수 있습니다.

width 가 변하더라도 맞춰서 잘라주니 편합니다!

위 스샷은 완성했던 참고용 캡쳐이고,

아래 코딩내용을 파일로 첨부했습니다.

아래와 같은 코딩이라 가정.

[code]

<div class="news">
    <li>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</li>
    <li>한상혁·이정옥 후보자 청문회…가짜뉴스·갭투자 쟁점</li>
    <li>Hong Kong Arrests Activists Ahead of Sensitive Anniversary</li>
</div>

[/code]

스타일을 줍니다.

[code]

<style>

.news {width:100%}
.news li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap; 
  width: 90%;
  display: block;
}

</style>

[/code]

끝. 참 쉽죠...

text-overflow: ellipsis; 이놈이 핵심이고,

display: block; 은 width 지정이 안되는게 있을때 넣어주시면 됩니다.

width 가 100% 인 <div> 안에 <li> 의 width를 90% 로 잡아주어

유동적으로 이쁘게 잘 잘립니다.

감사합니다.