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 지정된 텍스트 행이 수평으로 배치되거나 수직으로 배치되는지 지정합니다.