CSS 줄바꿈 금지

Question

white-space: nowrap; 을 사용하면 줄바꿈이 되지 않습니다.

아래 예제를 살펴보세요 ^^

줄바꿈 되는 일반적인 것과 그렇지 않은 예제입니다.

줄바꿈이 되지않은 것(뚫고 나오네요)
<div style="border:1px solid silver; white-space:nowrap; width:100px;">현재 시각은 2020년 2월 15일 토요일 오후 10시 10분 입니다. ^^*</div>
줄바꿈이 된것
<div style="border:1px solid silver; width:100px;">현재 시각은 2020년 2월 15일 토요일 오후 10시 10분 입니다. ^^*</div>

Answer 1

CSS에서 줄바꿈을 막고 싶을 때는 white-space 속성을 사용하면 됩니다.

white-space: nowrap;

이 속성을 적용하면 요소의 너비를 넘어가더라도 자동 줄바꿈이 되지 않고 한 줄로 표시됩니다.

예시

<div style="border:1px solid silver; width:100px; white-space:nowrap;">
  현재 시각은 2020년 2월 15일 토요일 오후 10시 10분 입니다.
</div>

반대로 줄바꿈이 필요하다면 white-space 속성을 지정하지 않거나 기본값(normal)을 사용하면 됩니다.