CSS 강좌 | Tips > CSS로 문자열 자르기 - 한 줄만 나오게 하기

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다.

하지만, 특별한 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다.

이를 해결하는 방법은 스크립트를 이용하는 방법과 CSS를 이용하는 방법이 있는데, CSS를 이용하는 방법을 소개해드립니다.

여기서 설명하는 것은 여러줄로 나오는 것을 한줄까지만 나오게 하는 것입니다.

예제

문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다.

줄바꿈 되지 않게 하기

white-space 속성으로 줄바꿈이 되지 않도록 합니다.

white-space: nowrap;

화면 크기를 벗어나므로 가로 스크롤바가 생깁니다.

화면을 벗어난 문자열 보이지 않게 하기

overflow 속성으로 화면을 벗어난 문자열이 보이지 않게 합니다.

overflow: hidden;

말줄임표 넣기

text-overflow 속성으로 말줄임표를 넣습니다.

text-overflow: ellipsis;

전체 소스

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        font-family: sans-serif;
        font-size: 20px;
      }
      .a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.
    </p>
    <p class="a">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.
    </p>
  </body>
</html>

Category

Created on 2016-11-22 11:38 | Updated on 2016-11-22 11:38

이 글을 공유하기

Kakao

Book navigation