반응형 말줄임(text ellipsis) 효과

RWD ellipsis(반응형 말줄임 참고 자료)

공지사항과 같은 리스트 타입에서 말줄임 효과를 구현해 봅니다.

RWD 공지사항 말줄임 효과 만들어보기

html

<ul class="article-list">
    <li>
        <a href="#none">
            <span class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nihil!</span>
            <span class="date">2014-08-30</span>
        </a>
    </li>
    <li>
        <a href="#none">
            <span class="title">Lorem ipsum dolr adipisicing elit. Neque nihil!</span>
            <span class="date">2014-09-03</span>
        </a>
    </li>
</ul>

css

.article-list { width: 70%;}
.article-list li {}
.article-list li a {position: relative;display:block;line-height: 27px;padding-right: 80px; color: #333;}
.article-list li a .title {display: block;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;}
.article-list li a .date {position: absolute;right: 0;top: 0;}

See the Pen 반응형 공지사항 말줄임 by jaeheekim (@jaehee) on CodePen.

윈도우 창의 크기를 늘였다 줄였다 해봅니다.

프로젝트 디자인에 따라 콘텐츠의 폭의 단위인 %를 조절하여 사용합니다.

[Tip] print CSS 작성팁

@mdia print { #aside {display: none; }}

Jaehee's WebClub