.article-link p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
문자(text) 행(line)의 길이가 컨테이너 박스의 가로 폭을 초과할 경우에, 폭에 맞추어 잘라내고(truncate) 말 줄임(ellipsis) 처리하는 방법입니다.
CSS의 text-overflow 설정 값으로는 ellipsis, clip, string, initial, inherit을 사용합니다.
말줄임표(ellipsis)를 사용하여 초과하는 문자를 잘라낸 모습입니다. 한글 맞춤법의 말줄임표 부호 "......"와 형태가 다릅니다. 아래와 같이 임의로 지정 가능합니다.
text-overflow: ellipsis " [..]";
text-overflow: ellipsis "-";
text-overflow: ellipsis "......";
text-overflow: ellipsis "[...]";
text-overflow: ellipsis "[생략]";
(inline-)block과 함께 사용하여 문제 발생하는 경우
HTML:
<p>
<a href="" title="next page">↑
<span>,</span></a>
</p>
CSS:
p {
max-width: 760px;
padding: 0 16px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
위에 첨부한 이미지를 구현하기 위한 HTML과 CSS 코드입니다. 이 구문에서 <a> 링크는 텍스트의 높이가 마우스로 클릭할 수 있는 범위입니다.
모양을 수정하여 <a> 태그의 높이를 컨테이너 <p> 태그의 높이만큼 늘리면, 클릭할 수 있는 범위가 확장되어 모바일에서도 편한 사용자 환경을 만들 수 있습니다. 아래 이미지의 파란색 줄로 표시한 범위를 뜻합니다.
<a> 태그용 코드를 추가합니다.
p a {
display: block;
line-height: 40px;
}
inline 요소인 <a>에 높이를 지정하기 위하여 block 요소로 변경하고 40픽셀의 높이를 설정한 구문입니다. 정상적인 코드임에도 여기서는 text-overflow와 연관된 문제가 발생하였습니다.
문제 발생 원인과 해결 방법
위 이미지와 같이 텍스트가 사라지고 말줄임표만 남았습니다. 정상이라고 오판했던 구문에 문제가 있다는 것입니다.
컨테이너 박스인 <p> 태그 안에서 텍스트로 인식되던 <a> 태그의 성질이 블록 박스로 변경되었기 때문입니다. developer.mozilla.org의 "text-overflow" 페이지에 다음과 같은 설명이 있습니다.
| The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example). |
text-overflow 설정은 inline 진행 방향으로 block 컨테이너 요소의 범위를 넘어서는 (text) 컨텐트에만 영향을 미칩니다.
- 오류가 발생한 수정 코드에서는 <a>와 "display: block"이 결합하여 <a> 태그가 컨테이너로 성질이 변경되었습니다.
- <p> 태그에 text-overflow를 설정한 상태에서,
- block 컨테이너로 바뀐 <a> 태그 내부의 텍스트에 영향을 미치지 못합니다.
<a> 태그에 높이를 설정하면서 <a> 태그 내부 텍스트에 말줄임 기능을 부여하려면 text-overflow 관련 코드를 <p> 태그에서 <a> 태그로 이동해야 합니다. 아래와 같이,
CSS:
p {
max-width: 760px;
padding: 0 16px;
line-height: 40px;
}
p a {
display: block;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
이 코드에서 <a> 태그에 "max-width: 100%;"를 추가한 이유가 있습니다.
text-overflow는 컨테이너 박스의 가로 폭을 계산하여 내부 텍스트의 끝을 말줄임표로 마감합니다. 600px, 900px와 같은 한정된 단위의 수치를 제공해야 합니다. 반응형으로 폭이 가변적일 경우 "max-width" 설정을 추가하면 문제가 발생하지 않습니다.
댓글