CSS에서 텍스트를 감싸는 방법

CSS는 웹 디자인에 사용되는 스타일 시트 언어로, 웹 페이지를 더욱 아름답고 읽기 쉽게 만들 수 있습니다. 텍스트는 웹 페이지에서 많은 부분을 차지하므로 텍스트를 어떻게 감싸느냐는 CSS 디자인에서 중요한 문제입니다.

CSS에서는 줄 바꿈을 줄 바꿈 또는 단어 나누기라고 합니다. 이는 텍스트 줄의 길이가 특정 제한을 초과할 때 텍스트를 자동으로 줄 바꿈하거나 단어 줄 바꿈 기호를 추가하는 방법을 말합니다. 다음은 CSS에서 텍스트 줄 바꿈을 구현하는 방법을 소개합니다.

1. CSS에서 "word-wrap" 속성을 사용하세요.

CSS에서는 "word-wrap" 속성을 사용하여 단어 중간에 단어 분할이 수행되는지 여부를 제어할 수 있습니다. 기본적으로 브라우저는 자동으로 단어를 새 줄로 줄바꿈하지만 "word-wrap" 속성을 설정하면 브라우저가 자동으로 단어 중간에 하이픈 기호를 삽입하여 더 나은 줄 바꿈 효과를 얻을 수 있습니다. 구체적인 코드는 다음과 같습니다.

p {
  word-wrap: break-word;
}

이 스타일은 컨테이너 너비가 부족할 때 단어 줄을 끊고 단어 중간에 하이픈 기호를 삽입하여 배열의 무결성을 보장합니다.

2. CSS에서 "word-break" 속성을 사용하세요

CSS는 "word-wrap" 속성 외에도 비CJK(중국, 일본)의 줄 바꿈을 제어하는 ​​또 다른 속성인 "word-break"를 제공합니다. , 한국) 문자입니다. 기본 설정과 함께 사용하는 경우 "단어 분리"는 단어의 어느 위치에서나 단어를 분리하여 시각적 중단을 유발할 수 있습니다. 이 문제를 해결하려면 "word-break" 속성을 "keep-all"로 설정하여 단어에서 줄이 깨지지 않도록 할 수 있습니다. 구체적인 코드는 다음과 같습니다.

p {
  word-break: keep-all;
}

3. CSS에서 "white-space" 속성을 사용하세요.

CSS의 "white-space" 속성은 텍스트의 공백과 줄 바꿈 표시를 제어하는 ​​데 사용됩니다. 기본적으로 "white-space" 속성은 "normal"로 설정되어 텍스트의 추가 공백과 줄 바꿈을 무시합니다. 이러한 공백과 줄 바꿈을 유지하려면 "white-space" 속성을 설정할 수 있습니다. "사전" 또는 "사전 포장"으로. 구체적인 코드는 다음과 같습니다:

p {
  white-space: pre-wrap;
}

이 스타일은 컨테이너에 연속된 공백과 줄 바꿈을 유지합니다. 텍스트에서 줄 바꿈을 강제로 적용하려면 "
" 표시를 사용할 수 있습니다. 예:

<p>这是第一行
这是第二行</p>

위는 일반적으로 사용되는 세 가지 CSS 스타일 속성으로, 줄 바꿈과 텍스트 표시를 효과적으로 제어할 수 있습니다. 실제 웹 디자인에서는 실제 상황에 따라 적절한 속성을 선택하여 최상의 효과를 얻을 수 있습니다.

위 내용은 CSS에서 텍스트를 감싸는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!