CSS를 사용하여 줄 바꿈을 달성하는 방법(세 가지 방법)

줄 바꿈이란 텍스트나 기타 내용이 줄 끝에 도달하면 자동으로 다음 줄로 이동하는 동작을 말합니다. 웹 디자인에서 올바른 줄 바꿈은 페이지를 더욱 편안하고 자연스럽게 보이게 할 수 있습니다. CSS에서 올바른 줄바꿈을 달성하려면 몇 가지 원칙과 기술을 이해해야 합니다. 이 기사에서는 CSS를 사용하여 줄 바꿈을 수행하는 방법에 대한 여러 가지 방법을 소개합니다.

방법 1: word-wrap 사용

CSS3에는 word-wrap 속성이 제공되어 텍스트 줄 바꿈 방식을 제어하는 ​​데 사용할 수 있습니다. 이 속성에는 다음 값이 있습니다.

• normal: 기본 속성 값. 이는 텍스트가 제한되지 않으며 경계를 초과할 수 있음을 의미합니다.
• break-word: 텍스트가 경계를 초과할 때 단어가 자동으로 잘리고 줄 바꿈되지만 단어 자체가 매우 길어 여전히 경계를 초과하는 경우
• anywhere: 텍스트가 어디든 줄바꿈될 수 있음을 의미합니다.
• overflow-wrap: 텍스트가 "단어" 주위를 둘러쌀 수 있음을 의미합니다. 긴 단어가 나타나면 개행 문자가 잘립니다.

단어 줄 바꿈을 사용하는 것도 매우 간단합니다. CSS에서 해당 속성을 설정하기만 하면 됩니다. 예:

p {
  word-wrap: break-word;
}

위 코드는 p 요소의 텍스트가 경계를 만나면 자동으로 잘리고 단어 길이에 따라 줄바꿈됩니다.

방법 2: 단어 분리 사용

단어 줄 바꿈이 항상 이상적인 솔루션은 아닙니다. 때로는 단어 잘림을 피하고 대신 어디에서나 줄 바꿈을 원하기 때문입니다. 이 경우 word-break 속성을 사용할 수 있습니다.

word-break 속성의 값은 다음과 같습니다.

• normal: 기본 속성 값은 텍스트가 제한되고 단어 중간의 잘림이 허용되지 않음을 의미합니다.
• break-all: 단어 중간에서도 줄 바꿈을 포함하여 모든 위치에서 줄 바꿈을 나타냅니다. 그러나 이는 단어의 무결성을 파괴하므로 권장되지 않습니다.
• keep-all: 텍스트가 공백이나 하이픈에서만 끊어짐을 나타냅니다. 이는 아시아 언어 및 공백을 사용하지 않는 기타 언어에 적합합니다.

예를 들어 텍스트 줄 바꿈에서 완전한 한자를 중단하려면 다음 코드를 사용할 수 있습니다.

p {
  word-break: break-all;
}

방법 3: 공백 사용

공백은 CSS에서 공백을 제어하는 ​​데 사용됩니다. 텍스트 속성의 줄 바꿈. 값은 다음과 같습니다.

• normal: 기본 속성 값. 이는 텍스트의 여러 공백과 줄 바꿈이 하나의 공백으로 병합됨을 의미합니다.
• pre: 텍스트의 여러 공백과 줄 바꿈이 병합됨을 의미합니다. 보유됨, 병합되지 않음
• nowrap: 텍스트가 자동으로 줄 바꿈되지 않음을 나타냅니다.
• pre-wrap: 텍스트의 여러 공백과 줄 바꿈이 유지되지만 줄이 자동으로 줄 바꿈되고 가로 스크롤 막대가 나타나지 않음을 나타냅니다.
• pre-line: 텍스트의 여러 공백이 하나의 공백으로 병합되지만 줄 바꿈이 유지되고 자동 줄 바꿈이 이루어지며 가로 스크롤 막대가 나타나지 않음을 나타냅니다.

예를 들어 여러 줄의 코드 주석에서 원래 공백과 줄 바꿈을 유지하려면 다음 코드를 사용할 수 있습니다.

.comment {
  white-space: pre;
}

이렇게 하면 페이지에 표시되는 텍스트 형식이 일관되게 유지됩니다. 원본 코드의 형식으로.

요약

CSS에서 올바른 줄바꿈을 달성하려면 몇 가지 요령을 알아야 합니다. 단어 줄 바꿈, 단어 분리 및 공백의 세 가지 속성을 사용하여 텍스트의 자동 줄 바꿈, 단어 분리 및 공백 유지를 달성합니다. 올바른 줄 바꿈은 페이지를 더 읽기 쉽고, 아름답고, 전문적으로 만들 수 있습니다.

위 내용은 CSS를 사용하여 줄 바꿈을 달성하는 방법(세 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!