CSS 줄 바꿈 코드는 무엇입니까?

css 줄 바꿈 코드: 1. "word-wrap: break-word;word-break: Normal;" 문은 자동 줄 바꿈을 실현할 수 있습니다. 2. "word-break:break-all;" 문은 강제로 줄 바꿈을 실현할 수 있습니다. 영어 단어 줄 바꿈.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css에서 줄 바꿈하는 여러 가지 방법

자동으로 줄 바꿈

div{
    word-wrap: break-word;
    word-break: normal;
}

영어 단어 줄 바꿈 강제

 div{
    word-break:break-all;
 }

줄 바꿈 없음 강제 적용

div{
    white-space:nowrap;
}

설명:

1.

공백 속성 설정 요소 내의 공백을 처리하는 방법입니다.

이 속성은 레이아웃 프로세스 중에 요소의 공백 문자를 처리하는 방법을 선언합니다.

구문: ​​

white-space : normal | pre | nowrap | pre-wrap | pre-line ;

속성 값:

• normal: 기본값. 브라우저는 공백을 무시합니다.

• pre: 브라우저가 공백을 유지합니다. 이는 HTML의

   태그처럼 동작합니다. <p></p></li><li>nowrap: 텍스트는 줄 바꿈되지 않으며 <br> 태그가 나타날 때까지 텍스트가 같은 줄에 계속 표시됩니다. <p></p></li><li>pre-wrap: 공백 시퀀스를 유지하지만 일반적으로 줄을 바꿉니다. <p></p></li><li>pre-line: 공백 시퀀스를 병합하지만 개행은 유지합니다. <p></p></li></ul>2. word-wrap 속성 <p></p> word-wrap 속성을 사용하면 긴 단어나 URL 주소를 다음 줄로 넘길 수 있습니다. <p></p>Syntax<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">word-wrap: normal|break-word;

  로그인 후 복사

속성 값:

• normal: 허용된 하이픈 지점에서만 줄바꿈합니다(브라우저는 기본 처리를 유지합니다).

• break-word: 긴 단어나 URL 주소 안의 줄을 바꿉니다.

3. word-breaks 속성

word-break 속성은 자동 줄 바꿈 처리 방법을 지정합니다.

Syntax

word-break: normal|break-all|keep-all;

속성 값:

• normal: 브라우저의 기본 줄 바꿈 규칙을 사용합니다.

• break-all: 단어 내에서 줄 바꿈을 허용합니다.

• 모두 유지: 반각 공백이나 하이픈에서만 줄바꿈을 사용합니다.

(동영상 공유 학습:

css 동영상 튜토리얼)

위 내용은 CSS 줄 바꿈 코드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!