CSS 텍스트 효과

CSS 텍스트 오버플로우, 전체 글자 줄바꿈, 줄바꿈 규칙 및 쓰기 모드

이 장에서는 다음과 같은 속성을 배울 것입니다：

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS 글자 오버플로우

CSS text-overflow 속성은 사용자에게 표시되지 않은 부분의 오버플로우를 어떻게 표시할지 정의합니다.

잘리울 수 있습니다：

이는 상자에 들어가지 않는 긴 텍스트입니다. 이는 상자에 들어가지 않는 긴 텍스트입니다

또한 점자로 표시할 수 있습니다（...）：

이는 상자에 들어가지 않는 긴 텍스트입니다. 이는 상자에 들어가지 않는 긴 텍스트입니다

다음은 CSS 코드입니다：

예제

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

직접 시험해 보세요

다음 예제는 마우스를 요소에 올려놓을 때 어떻게 흐름을 표시하는지 보여줍니다：

예제

div.test:hover {
  overflow: visible;
}

직접 시험해 보세요

CSS 단어 브레이킹(Word Wrapping)

CSS word-wrap 속성은 긴 텍스트가 끊어지고 다음 줄로 이동할 수 있도록 합니다。

한 단어가 한 공간에 들어가지 않을 정도로 길면 그 밖으로 확장됩니다：

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

word-wrap 속성을 통해 텍스트를 강제로 라인 브레이크할 수 있습니다 - 이는 단어 중간에서 분할하는 것을 의미할 수 있습니다：

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

다음은 CSS 코드입니다：

예제

긴 단어가 끊어지고 다음 줄로 이동할 수 있도록 허용합니다：

p {
  word-wrap: break-word;
}

직접 시험해 보세요

CSS 라인 브레이크 규칙

CSS word-break 속성은 라인 브레이크 규칙을 지정합니다。

이 문단에는 일부 텍스트가 포함되어 있습니다. 이 줄은 하이픈에서 끊어집니다：

This paragraph contains some text. This line will-break-at-hyphens.

이 문단에는 일부 텍스트가 포함되어 있습니다. 이 줄은 어떤 문자에서나 끊어집니다：

This paragraph contains some text. The lines will break at any character.

다음은 CSS 코드입니다：

예제

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

직접 시험해 보세요

CSS 쓰기 모드

CSS writing-mode 속성은 텍스트 행이 수평으로 배치되거나 수직으로 배치되는지 정의합니다。

Some text with a span element with a vertical-rl writing-mode.

다음 예제는 다양한 쓰기 모드를 보여줍니다：

예제

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

직접 시험해 보세요

CSS 텍스트 효과 속성

다음 표는 CSS 텍스트 효과 속성을 나열합니다：

속성 설명
text-align-last 텍스트의 마지막 행을 어떻게 정렬할지 지정합니다.
text-justify 정렬된 텍스트가 어떻게 정렬되고 간격을 두는지 지정합니다.
text-overflow 사용자에게 표시되지 않은 넘친 내용을 어떻게 표시할지 지정합니다.
word-break CJK 스크립트가 아닌 스크립트의 줄 바꿈 규칙을 지정합니다.
word-wrap 긴 단어가 끊어지고 다음 행으로 이동할 수 있도록 허용합니다.
writing-mode 지정된 텍스트 행이 수평으로 배치되거나 수직으로 배치되는지 지정합니다.