8.1 text-overflow 속성
텍스트의 흐름을 제어하고 표시하는 것은 웹 디자인에서 매우 중요한 부분이야, 특히 긴 텍스트 줄이나 크기가 제한된 컨테이너를 다룰 때 그렇지.
text-overflow, white-space, 그리고 word-wrap (현재는 overflow-wrap로 알려짐)
같은 속성들은 이런 상황에서 텍스트가 어떻게 동작할지를 컨트롤 하도록 해줘.
text-overflow 속성은 컨테이너 경계를 넘어서는 텍스트가 어떻게 표시될지를 관리해.
이 속성은 white-space 및 overflow 속성과 함께 사용되어서 텍스트를 자르고 생략 부호를 추가하는 효과를 만들어줘.
값:
clip: 컨테이너 경계를 넘은 부분의 텍스트를 자름ellipsis: 잘린 텍스트 끝에 생략 부호 (...)를 추가함
사용 예시:
CSS
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
HTML
<body>
<div class="container clip">이 텍스트는 컨테이너 경계까지만 보입니다.</div>
<div class="container ellipsis">이 텍스트는 잘리고 생략 부호로 대체됩니다.</div>
</body>
8.2 white-space 속성
white-space 속성은 공백 문자 처리와 텍스트 줄바꿈을 관리해. 공백, 탭, 그리고 새로운 줄이
어떻게 처리될지를 설정할 수 있어.
값:
normal: 공백과 줄바꿈이 기본값으로 처리됨nowrap: 줄바꿈 없이 텍스트가 한 줄로 표시됨pre: 공백과 줄바꿈이 HTML의<pre>태그처럼 그대로 유지됨pre-wrap: 줄 필요시 텍스트가 줄바꿈될 수 있지만 공백과 줄바꿈은 그대로 유지됨pre-line: 줄바꿈은 유지되지만 공백은 일반적으로 처리됨break-spaces: 공백과 줄바꿈이 유지되며 긴 공백이 줄바꿈을 유발할 수 있음
사용 예시:
CSS
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
HTML
<body>
<div class="normal">이 텍스트는 공간이 부족하면 다음 줄로 넘어갈 것입니다.</div>
<div class="nowrap">이 텍스트는 줄바꿈 없이 한 줄로 나타날 것입니다.</div>
<div class="pre">
이 텍스트는 모든 공백과
줄바꿈을 유지합니다.
</div>
<div class="pre-wrap">
이 텍스트는 새로운 줄로 넘어갈 수 있지만, 모든 공백과 줄바꿈을 유지합니다.
</div>
</body>
8.3 overflow-wrap 속성
overflow-wrap (이전에는 word-wrap로 알려짐) 속성은 컨테이너 경계를 넘어가는 단어의 줄바꿈을 관리해.
이 속성은 분할이 불가능한 긴 단어로 인해 컨테이너가 넘치는 것을 방지할 수 있어.
값
normal: 표준 줄바꿈 규칙에 따라 단어가 줄바꿈됨break-word: 단어를 나누어서라도 줄바꿈이 됨
사용 예시:
CSS
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
HTML
<body>
<div class="container normal">이 텍스트는 공간이 부족하면 다음 줄로 넘어갈 것입니다.</div>
<div class="container break-word">이긴단어는 공간이 부족하면 다음 줄로 넘어갑니다.</div>
</body>
코드 설명:
overflow-wrap: normal;: 표준 규칙에 따라 단어가 잘리고 줄바꿈이 됨overflow-wrap: break-word;: 긴 단어는 잘리며 필요한 경우 다음 줄로 넘어감
8.4 속성의 조합 사용
text-overflow, white-space, 그리고 word-wrap 속성들은 종종
크기가 제한된 컨테이너에서 원하는 텍스트 표시 효과를 얻기 위해 함께 사용돼.
사용 예시:
CSS
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
HTML
<body>
<div class="container">이 텍스트는 공간이 부족할 경우 잘리고 생략부호로 대체됩니다.</div>
</body>
코드 설명:
white-space: nowrap;: 텍스트가 한 줄로 표시되고 줄바꿈이 없음overflow: hidden;: 컨테이너 경계를 넘어가는 텍스트를 숨김text-overflow: ellipsis;: 잘린 텍스트 끝에 생략 부호를 추가함overflow-wrap: break-word;: 공간이 부족하면 긴 단어를 줄바꿈함
GO TO FULL VERSION