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 단어 줄 바꿈

CSS word-wrap속성을 사용하면 긴 단어를 끊고 다음 줄로 줄 바꿈할 수 있습니다.

단어가 너무 길어서 영역에 맞지 않으면 외부로 확장됩니다.

이 단락에는 매우 긴 단어가 포함되어 있습니다. thisisaveryveryveryveryveryverylongword. 긴 단어는 끊기고 다음 줄로 줄 바꿈됩니다.

word-wrap 속성을 사용하면 텍스트를 강제로 줄 바꿈할 수 있습니다. 단어 중간에서 분할하는 것을 의미하더라도:

이 단락에는 매우 긴 단어가 포함되어 있습니다. thisisaveryveryveryveryveryverylongword. 긴 단어는 끊기고 다음 줄로 줄 바꿈됩니다.

CSS 코드는 다음과 같습니다.

예시

긴 단어를 끊고 다음 줄로 줄 바꿈할 수 있습니다.

p {
word-wrap: break-word;
}

CSS 단어 분리

CSS word-break속성은 줄 바꿈 규칙을 지정합니다.

이 단락에는 일부 텍스트가 포함되어 있습니다. 이 줄은 하이픈으로 구분됩니다.

이 단락에는 일부 텍스트가 포함되어 있습니다. 모든 문자에서 줄이 끊어집니다.

CSS 코드는 다음과 같습니다.

예시

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

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

CSS 작성 모드

CSS writing-mode속성은 텍스트 줄을 가로로 배치할지 세로로 배치할지 지정합니다.

span 요소가 있는 일부 텍스트 수직-RL 쓰기 모드.

다음 예는 몇 가지 다른 쓰기 모드를 보여줍니다.

예시

p.test1 {
writing-mode: horizontal-tb;
}

span.test2 {
writing-mode: vertical-rl;
}

p.test2 {
writing-mode: vertical-rl;
}