CSS | 문장이 길 때 줄 생략하기

디자인 블록을 만들었을 때 일관성이 있어야 완성도가 높아보이는 효과가 있습니다. 그런데, 만약 어떤 글에는 두줄, 세줄로 표현되어있다면 분명 통일감이 떨어지게 되는 단점을 가지게 됩니다.

글자를 한줄로 만들기 위해서는 CSS로 조절하는 방법을 알아야 합니다.

<div class="rading">

    <p>수많은 정보를 담은 나의 철학적인 물티슈로 끓인 라면</p>

</div>

먼저 간단한 글을 만들어서 class 적용을 진행합니다. CSS 적용을 위해 rading 이라는 클래스 명을 설정하였습니다. 저장이 완료되었다면 바로 CSS 문서로 들어갑니다

.rading p {

  /* 한줄만 자를 때 */

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

1. overflow : hidden 범위 안에서 글자가 넘쳤을 경우 숨김처리 합니다
2. text-overflow : ellipsis 글자를 자르는 기능입니다.
3. whute-space : nowrap 줄바꿈을 어떻게 설정할지 선택합니다

한줄만 나오도록 설정하려면 위의 방법을 통해 진행하면 됩니다.

만약 여기서 width : 400px 를 추가로 설정하게 되는 경우 400px가 벗어났을 때 숨겨지는 효과를 만들 수 있게됩니다.

.rading p {

  /* 한줄만 자를 때 */

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* 여러 줄 자를 때 */

  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

}

1. word-wrap : break-word
2. display : -webkit-box
3. -webkit-line-clamp : 2 줄 개수
4. -webkit-box-orient : vertical 플렉스 박스 방향

.rading {

    display: block;

}

먼저 text-overflow를 작동시키려면 display 속성이 block 혹은 inline-bloc으로 되어있는지 체크해야합니다. 만약 inline인 경우는 적용이 되지 않으니 확인해보세요

크로스브라우징

.rading {

    inline-height: 1.2;
    height: 3em;
    white-space: normal;

}

크로스브라우징을 만들기 위해서는 line-height, white-space, height 등의 속성을 추가하는 것이 좋습니다