[CSS] max-width, 줄바꿈 같이 쓰는 법

🏃 만약 박스안의 글자가 여러 형태로 나타나며, 줄 바꿈의 경우 지정한 max-width를 넘기는 경우에만 작동하도록 해보자.

See the Pen Untitled by KumJungMin (@kumjungmin) on CodePen.

1. 코드 미리보기

<div class="container">XSaR nZ 5 hsKHW 6BQ ob3EtSvz pkjlt K3LWl9 7aEm GZk3L ptj CtRDf61 n8limNiY UlmJ Fia4NRZ cd9I8w1Aq 1ZJV0azadf rixBLvjy0pVCUB 2FRSx7 rBJH9 0noi3kx0U3TPtCJEN HcxmS </div>

.container {
  width: max-content;
  max-width: 300px;
  word-break: break-all;
  border: 1px solid black;
  font-size: 25px;
}

2. 코드 상세보기

1) html

• html 구조는 간단하다.
• 글자를 감싸는 div 요소를 생성하고 클래스를 지정해주자.

<div class="container">XSaR nZ 5 hsKHW 6BQ ob3EtSvz pkjlt K3LWl9 7aEm GZk3L ptj CtRDf61 n8limNiY UlmJ Fia4NRZ cd9I8w1Aq 1ZJV0azadf rixBLvjy0pVCUB 2FRSx7 rBJH9 0noi3kx0U3TPtCJEN HcxmS </div>

2) css

(1) 너비 지정하기

• 글자 길이에 따라 너비가 변경되고, 대신 300px을 넘어가는 경우 줄바꿈이 되게 하려면 max-width, width를 지정해야 한다.
• 아래와 같이 지정하면 너비의 범위는 max-content < width < 300px 과 같이 된다.

.container {
  width: max-content;
  max-width: 300px;
  border: 1px solid black;
  font-size: 25px;
}

(2) word-break 설정하기

• 그런데 이미지를 보니, 글자가 너비를 넘지 않았는데 띄어쓰기가 있는 부분에서 줄바꿈이 발생한다;
• 글자가 너비를 넘어가는 경우에만 줄바꿈이 되게 하려면 word-break를 설정해야 한다.

🏃 word-break는 무엇일까?

• work-break는 줄바꿈 기준을 변경할 수 있는 속성이다.
• normal: 기본값, CJK(Chinese - Japanese - Korean)는 글자 기준으로, 그 이외는 단어 기준으로 줄바꿈을 한다.
• break-all: 글자 기준으로 줄바꿈을 한다.
• keep-all: 단어 기준으로 줄바꿈을 한다.

See the Pen word break by KumJungMin (@kumjungmin) on CodePen.

🏃 너비를 넘어갔을 때만 줄바꿈이 되게 하려면 break-all을 해주면 된다!

.container {
  width: max-content;
  max-width: 300px;
  border: 1px solid black;
  font-size: 25px;
  word-break: break-all;  # this!
}