최근 토스에서 Frontend Accelerator 1기를 모집하여, 신청하여 객관식 시험을 볼 수 있었는데,
모두 골라야한다는 점이 확실히 알고 있어야하는 것인데, 100% 확신하는가라고 생각했던 문제가 거의 없었던 것 같다.
그 중 텍스트 줄바꿈 속성에 관한 문제도 있었어서, 적어보려고 한다.
텍스트 줄바꿈 방법
1. white-space
<div class="text-container">
This is a long text that we want to wrap naturally to the next line without breaking words.
</div>
.text-container {
width: 200px;
white-space: normal; /* 기본값 */
}
white-space 속성은 공백 문자와 줄 바꿈을 어떻게 처리할지 결정한다:
normal: 기본값. 공백을 압축하고 필요시 자동 줄바꿈nowrap: 줄바꿈을 하지 않음pre: 공백과 줄바꿈을 그대로 유지pre-wrap: 공백을 유지하고 필요시 자동 줄바꿈pre-line: 줄바꿈만 유지하고 공백은 압축, 필요시 자동 줄바꿈
2. word-wrap (overflow-wrap)
See the Pen word-wrap/overflow-wrap by JuniorTunarr (@juniortunarr) on CodePen.
word-wrap (또는 overflow-wrap)은 긴 단어를 강제로 줄바꿈할 수 있게 한다.
3. word-break
See the Pen word-break by JuniorTunarr (@juniortunarr) on CodePen.
word-break는 단어의 중간에서도 줄바꿈을 할 수 있게 한다.
normal: 기본 줄바꿈 규칙 사용break-all: 모든 문자에서 줄바꿈 가능keep-all: 단어 중간에서 줄바꿈하지 않음 (CJK 텍스트에 유용)
4. hyphens
See the Pen hyphens by JuniorTunarr (@juniortunarr) on CodePen.
hyphens 속성은 단어를 하이픈으로 나누어 줄바꿈합니다. 브라우저 지원이 제한적일 수 있다.
5. text-overflow
See the Pen text-overflow by JuniorTunarr (@juniortunarr) on CodePen.
text-overflow는 넘치는 텍스트를 어떻게 표시할지 결정한다.
주로 ellipsis와 함께 사용하여 ...으로 표시한다.
6. 반응형 폰트 크기
See the Pen responsive by JuniorTunarr (@juniortunarr) on CodePen.
calc()와 뷰포트 단위를 사용하여 화면 크기에 따라 폰트 크기를 조절할 수 있다.
