반응형

 

🚀

웹페이지에서 UI를 만들 때 박스 안의 텍스트의 길이가 길어서 해당 영역을 벗어나는 경우 말줄임(...)을 적용해야 하는 방법에 대해서 포스팅해보겠습니다.

 

✔️ 말줄임 표시 방법

 

📋 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      body {
        background: #ddd;
      }
      .area {
        margin: 20px 10px;
        width: 240px;
        background: white;
      }

      .white-space {
        white-space: nowrap;
      }

      .overflow {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="area">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="area white-space">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="area white-space overflow">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </body>
</html>

  1. white-space: no-wrap 속성은 해당 영역 내에 텍스트가 길 때 자동으로 줄 바꿈 하는 것을 방지합니다.
  2. overflow: hidden 속성은 해당 영역을 벗어나는 텍스트를 숨깁니다.

 

여기서 3번째 div에 대해 말줄임을 적용하기 위해 아래의 css 속성을 추가해줍니다.

text-overflow: ellipsis;

해당 속성 적용 시 텍스트가 영역을 벗어날 때 말줄임을 적용할 수 있습니다.

 

📋 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      body {
        background: #ddd;
      }
      .area {
        margin: 40px 30px;
        width: 180px;
        height: 40px;
        background: white;
      }

      .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div class="area ellipsis">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </body>
</html>

 

 

✔️ 2줄 이상의 텍스트에 대해서 말줄임 적용하기

 

📋 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      body {
        background: #ddd;
      }
      .area {
        margin: 40px 30px;
        width: 300px;
        background: white;
      }

      .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <div class="area">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, quo nesciunt
      aliquid nulla eveniet cupiditate odit nemo dolor nobis vel dicta, aliquam
      suscipit id assumenda eius consectetur blanditiis deleniti dolorum?
    </div>
    <div class="area ellipsis">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, quo nesciunt
      aliquid nulla eveniet cupiditate odit nemo dolor nobis vel dicta, aliquam
      suscipit id assumenda eius consectetur blanditiis deleniti dolorum?
    </div>
  </body>
</html>

  1. display: -webkit-box 속성은 해당 영역을 box 형태로 관리되도록 합니다.
  2. -webkit-line-clamp 속성은 해당 영역 내의 텍스트의 최대 라인수를 결정합니다.
  3. -webkit-box-orient: vertical 속성은 box의 흐름 방향을 수직으로 지정합니다.

 

 

 

반응형
저작자표시 비영리

'🌐WEB' 카테고리의 다른 글

[CSS] 클래스 네이밍 시 container와 wrapper의 차이  (0) 2022.05.21
[CSS] CSS, SASS, SCSS 차이점, 사용방법  (2) 2022.03.18
[CSS] display: none 과 visibility: hidden의 차이  (0) 2022.02.17
[CSS] 선택자에서 꺽쇠 > 의 의미는? (자식 선택자, 하위 선택자)  (4) 2022.02.10
[CSS] 하단바, 하단영역 고정하는 방법  (1) 2022.01.31

+ Recent posts

티스토리툴바