유용한 텍스트 CSS 말줄임

Chris·2019년 9월 3일

CSS로 작성되는 텍스트 말줄임은 웹 접근성에 반하지만 널리 사용된다. 일반적으로 적용하고자 하는 요소(또는 태그)를 block처리하고 text-overflow: ellipsis; white-space: nowrap; overflow: hidden 스타일을 적용하면 된다. 그러나 일반적인 텍스트 말줄임 외에의 텍스트 말줄임을 처리하는 방법을 소개한다.

# 일반적인 텍스트 말줄임

html

<ul class="news-list">
    <li><a href="#" class="news-item">ML 스카우트 한목소리…"타자보다 '투수 장재영' 원해</a></li>
    <li><a href="#" class="news-item">“21번 선수 나왔습니까?” 日 취재진도 주목한 장재영의 잠재력</a></li>
    <li><a href="#" class="news-item">미리 보는 KS…날개 잃은 비룡 vs 재주 부리는 곰</a></li>
    <li><a href="#" class="news-item">‘이변 없었다’ 아르헨티나, 나이지리아 꺾고 2연승…사실상 2R 진출</a></li>
    <li><a href="#" class="news-item">‘라건아만 믿는다’ 김상식호, 장대 러시아 막아설까</a></li>
</ul>

css

body {
    padding: 10px;
}
body * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.news-list {
    width: 300px;
    padding: 10px 10px 10px 30px;
    border: 2px solid lightgray;
}
.news-list > li {
    padding: 5px 0;
}
.news-item {
    display: block;
    text-decoration: none;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; 
}
.news-item:hover {
    text-decoration: underline;
}

# 상위 요소 inline-block, line-clamp 이용하기

html

<ul class="news-box">
    <li>
        <a href="#" class="text">ML 스카우트 한목소리…"타자보다 '투수 장재영' 원해</a>
        <span class="ico-outer"><i class="ico">new</i></span>
    </li>
    <li>
        <a href="#" class="text">“21번 선수 나왔습니까?” 日 취재진도 주목한 장재영의 잠재력</a>
        <span class="ico-outer"><i class="ico">new</i></span>
    </li>
    <li>
        <a href="#" class="text">미리 보는 KS…날개 잃은 비룡 vs 재주 부리는 곰</a>
        <span class="ico-outer"><i class="ico">new</i></span>
    </li>
    <li>
        <a href="#" class="text">‘이변 없었다’ 아르헨티나, 나이지리아 꺾고 2연승…사실상 2R 진출</a>
        <span class="ico-outer"><i class="ico">new</i></span>
    </li>
    <li>
        <a href="#" class="text">‘라건아만 믿는다’ 김상식호, 장대 러시아 막아설까</a>
        <span class="ico-outer"><i class="ico">new</i></span>
    </li>
</ul>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.news-box {
    max-width: 400px;
    padding: 10px;
    border: 2px solid lightgray;
}
.news-box li {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 10px;
}
.news-box .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 34px;
    font-size: 12px;
    color: #3d3d3d;
    text-decoration: none;
}
.news-box .ico-outer {
    position: absolute;
    bottom: -2px;
    right: 0;
}
.news-box .ico-outer .ico {
    display: inline-block;
    width: 30px;
    height: 20px;
    font-size: 11px;
    color: white;
    text-align: center;
    font-style: normal;
    background-color: red;
    border: 0;
    border-radius: 4px;
}

# 파일확장자 포함 텍스트 중간 말줄임

html

<ul class="file-list">
    <li>
        <div class="fileitem" data-filetype=".txt">
            <span>이것은 파일명이 현재 끝까지 보이지 않습니다.txt</span>
        </div>
    </li>
    <li>
        <div class="fileitem" data-filetype=".docx">
            <span>이것은 파일명이 긴 파일입니다만 끝까지 보이지 않습니다.docx</span>
        </div>
    </li>
    <li>
        <div class="fileitem" data-filetype=".html">
            <span>이것은 파일명이 정말로 긴 파일입니다만 끝까지 보이지 않습니다.html</span>
        </div>
    </li>
    <li>
        <div class="fileitem" data-filetype=".js">
            <span>이것은 파일명이 정말로 긴 파일입니다만 끝까지 보이지 않습니다.js</span>
        </div>
    </li>
    <li>
        <div class="fileitem" data-filetype=".png">
            <span>이것은 파일명이 정말로 긴 파일입니다만 끝까지 보이지 않습니다.png</span>
        </div>
    </li>
</ul>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.file-list {
    max-width: 400px;
    padding: 10px 10px 10px 30px;
    border: 2px solid lightgray;
}
.file-list > li {
    padding: 5px 0;
}
.fileitem {
    position: relative;
    width: 240px;
}
.fileitem span {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.fileitem:after {
    content: attr(data-filetype);
    position: absolute;
    left: 100%;
    top: 0;
}
.fileitem:hover {
    width: auto;
}
.fileitem:hover:after {
    display: none;
}