css

CSS ellipsis 말줄임 표시방법

uensung 2023. 1. 13. 21:43

안녕하세요! 오늘은 텍스트 글자 길이가 길어 영역을 초과할 때, 글자를 말줄임표로 만드는 css속성 ellipsis에 대해 정리해 보려고 합니다!

글자를 입력 해야 하는 영역의 크기가 작고, 그에 비해 입력 해야 할 텍스트 내용이 많을 때 주로 사용하는 속성인데요~ 먼저 예제 코드를 살펴 보시죠~

 

 

<style>
  .box {
    margin: 50px auto;
    width: 200px;
    height: 30px;
    border: 1px solid black;
  }
</style>

<body>
  <div class="box">
    문자열 입력 테스트입니다 긴 문자열이 필요합니다 긴문자열 예제입니다.
  </div>
</body>

 

위와 같이 가로 200px 세로 30px의 임의의 영역을 하나 잡아주고 내부에 긴 문자열을 입력해 보았습니다.

결과 화면은 아래와 같습니다.

 

 

 

 

위와 같이 가로 200px 세로 30px의 임의의 영역을 하나 잡아주고 내부에 긴 문자열을 입력해 보았습니다.

결과 화면은 아래와 같습니다.

 

 

 

1. 한 줄의 문자열 말줄임표 처리하기

<style>
  .box {
    margin: 50px auto;
    width: 200px;
    height: 30px;
    border: 1px solid black;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
</style>

 

box 영역의 css에 위 속성을 추가해 주었습니다. text-overflow: ellipsis는 초과하는 내용이 있을 경우 말줄임표(...) 와 같이 나타내 주는 속성입니다.

white-space: nowrap은 공백을 처리하는 옵션인데 여러개의 공백이 있을 경우 공백을 하나로 표시하고 내용이 길더라도 줄바꿈이 되지 않고 한 줄로 표시되게 됩니다.

overflow: hidden 속성으로 길게 한줄로 표시되는 텍스트중 초과되는 영역을 가려줍니다.

결과화면을 확인해 볼까요?

 

 

 

 

위와 같이 한 줄의 영역을 초과하는 문자열이 말줄임표 처리되어 나타나게 됩니다.

 

 

 

2. 원하는 줄까지 표시하고 초과영역 말줄임표 처리하기

<style>
  .box {
    margin: 50px auto;
    width: 200px;
    border: 1px solid black;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient:vertical;
    line-height: 30px;
    height: 60px;
  }
</style>

 

원하는 줄까지 문자열을 표시하고 초과하는 문자열부터 말줄임표 처리를 원할 경우 위와 같이 속성을 설정 합니다.

-webkit-line-clamp: 2 속성을 설정해 주면 두번째 줄까지는 문자열을 표시하고 이후 초과하는 영역부터 말줄임표 되어 문자열이 가려집니다. 위 예제에서는 한 줄의 높이를 line-height: 30px로 설정하였습니다. 전체 높이는 두 줄까지 표시해 줄 것이기 때문에 두배인 60px로 지정해 주었습니다. 결과 화면을 확인해 볼까요?

 

 

 

 

위와 같이 보여주기로 지정한 두번째 줄까지 문자열이 표시되고 이 후 초과 하는 영역 부터 말줄임표 처리되어 나타나게 됩니다.

 

 

 

3. 말줄임표 사용으로 가려지는 영역은 title 속성을 이용하여 전체 내용 표시해 주기

<body>
  <div class="box" title="문자열 입력 테스트">
    문자열 입력 테스트입니다 긴 문자열이 필요합니다 긴문자열 예제입니다.
  </div>
</body>

 

ellipsis 속성을 사용하여 말줄임표 처리된 긴 문자열의 경우 모든 내용을 확인 할 수 없게 됩니다. 그렇기 때문에 title 속성내부에 가려진 부분에 대한 부가적인 설명이나 전체 내용을 입력하여 마우스 커서를 올렸을 때, 전체 내용을 확인 할 수 있도록 표시해 주는 경우가 많습니다. 작은 부분이지만 사용자가 웹페이지를 사용할 때 말줄임표 처리 되어 가려진 텍스트 내용을 확인 할 수 있도록 속성을 추가해 줍니다!

 

 

 

오늘은 글자를 말줄임표로 만드는 css속성 ellipsis에 대해 정리해 보았습니다.

그럼 다음에 또다른 내용으로 찾아오겠습니다 :)