맨 땅에 프론트엔드 개발자 되기

공간보다 넘치는 글자 말줄임으로 처리하기 / CSS text-overflow: ellipsis 본문

코딩 공부 일지/CSS3 & SASS(SCSS)

공간보다 넘치는 글자 말줄임으로 처리하기 / CSS text-overflow: ellipsis

헬로코딩 2022. 3. 15. 18:02
728x90

어떤 일정한 크기의 요소가 반복될 때 그 요소의 내용의 길이가 들쭉날쭉이라면, 내용을 말줄임을 해서 크기를 일정하게 유지하고 싶을 때가 있다. 그럴 때 사용할 수 있는 것이 바로 text-overflow: ellipsis; 이다.

 

적용하기 전

<body>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique harum impedit sint possimus minus repellendus repellat? Quae delectus expedita quam ea fugiat quidem itaque minima asperiores? Aliquam magnam unde nihil.
    Explicabo voluptatem maiores dignissimos laborum reiciendis id accusamus obcaecati qui odit fugiat blanditiis illo rerum quasi consectetur in minus, at velit amet inventore suscipit asperiores quod? Dolorem dicta odio nulla?
    Nostrum quasi facere ducimus dolore doloribus dolores nemo impedit repellat, quidem repudiandae ullam magnam unde neque iste officia reiciendis vero praesentium. Sit accusamus dignissimos quidem magni dicta, sed nulla rem.
  </div>
</body>
<style>
  div{
    box-sizing: border-box;
    background-color: cadetblue;
    color: #fff;
    width: 300px;
    padding: 50px 20px;
    margin: 0 auto;  
  }
</style>

 

적용하고 난 후

<body>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique harum impedit sint possimus minus repellendus repellat? Quae delectus expedita quam ea fugiat quidem itaque minima asperiores? Aliquam magnam unde nihil.
    Explicabo voluptatem maiores dignissimos laborum reiciendis id accusamus obcaecati qui odit fugiat blanditiis illo rerum quasi consectetur in minus, at velit amet inventore suscipit asperiores quod? Dolorem dicta odio nulla?
    Nostrum quasi facere ducimus dolore doloribus dolores nemo impedit repellat, quidem repudiandae ullam magnam unde neque iste officia reiciendis vero praesentium. Sit accusamus dignissimos quidem magni dicta, sed nulla rem.
  </div>
</body>
<style>
  div{
    box-sizing: border-box;
    background-color: cadetblue;
    color: #fff;
    width: 300px;
    padding: 50px 20px;
    margin: 0 auto;
    /* 이 부분 추가 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

두 줄만 표시하고 나머지는 말줄임을 할 때는 아래와 같이 적용해주면 된다.

div{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

* white-space: no-wrap 속성은 꼭 제거해야 한다.

 

728x90
저작자표시

'코딩 공부 일지 > CSS3 & SASS(SCSS)' 카테고리의 다른 글

CSS 방법론 BEM 알아보기  (0) 2022.12.05
CSS 텍스트 드래그 방지  (0) 2022.11.29
코딩독학) SASS(SCSS) 색상 내장 함수  (0) 2022.02.02
코딩독학) SASS(SCSS) Mixin 과 Include  (0) 2022.02.02
코딩독학) 간단한 SASS(SCSS) 사용 방법 - Live Sass Complier  (0) 2022.02.02
'코딩 공부 일지/CSS3 & SASS(SCSS)' Related Articles more