[CSS] 줄 바꿈 방지하고 원하는 줄 수로 설정하기

Doyeon0430 | 2023년 06월 10일

이번시간에는 CSS의 white-space 속성을 활용하여 줄바꿈을 방지하겠습니다.

또한 overflow 속성으로 넘치는 내용을 숨기면서 고정된 줄 수가 보이도록 설정하는 방법에 대해 다루어 보도록 하겠습니다.

이를 통해 원하는 글자의 표현 방식을 더욱 다양하게 조절할 수 있습니다.

white-space 속성으로 줄바꿈 방지하기
webkit 속성으로 줄 수 고정하기
줄바꿈이 적용된 결과화면

1. white-space 속성으로 줄바꿈 방지하기

white-space는 CSS의 속성 중 하나입니다.

요소 내의 공백과 줄바꿈을 어떻게 처리할지를 지정하는 역할을 해주고 줄바꿈, 공백, 탭 등의 공백 문자들을 처리해줍니다.

CSS 코드

.sidebar{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

• display : block으로 한칸을 잡아줍니다.

• white-space : nowrap으로 해주시면 줄 바꿈 금지가 됩니다.

• overflow : 넘치는 내용을 숨김처리 해줍니다.

• text-overflow : ellipsis를 사용하면 넘친 텍스트는 ...으로 대체됩니다.

2. webkit 속성으로 줄 수 고정하기

한줄뿐만 아니라 2줄이나 3줄 등 줄 수를 고정할 수 있습니다.

그럴때 사용하는게 webkit 엔진으로 줄 수를 원하는 값에 고정시키는 css 속성입니다.

white-space는 한 줄로 밖에 안되지만 webkit을 사용하면 쉽게 해결 할 수 있습니다.

CSS 코드

.sidebar{
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

• display : webkit-box는 webkit 엔진에서 사용하는 css 속성으로 block으로 처리돼서 한줄로 표시됩니다.

• webkit-line-clamp : 줄 수를 설정할 수 있으며 넘치는 텍스트는 ...로 대체됩니다.

• webkit-box-orient : 다중으로 줄이 설정될 때 세로로 표시하도록 설정합니다.

• overflow : 넘치는 내용들을 숨김처리 해줘야합니다.

3. 줄바꿈이 적용된 결과화면

이렇게 모든 속성을 다 적용해봤습니다.

블로그의 제목과 내용이 길어져서 디자인이 별로였습니다.

그렇게 제목에는 white-space로 한줄로 고정시키고

내용에는 webkit에 2줄로 고정시키니 블로그의 UI가 조금 더 예뻐졌습니다.

줄바꿈 결과화면

줄바꿈 이미지

글을 마치며 white-space와 webkit을 사용해서 줄바꿈을 고정시키고 overflow으로 넘치는 내용들을 숨겨보았습니다.

댓글이 없습니다.

간편 댓글 작성