>  기사  >  웹 프론트엔드  >  CSS 줄 바꿈 코드는 무엇입니까?

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

青灯夜游
青灯夜游원래의
2021-07-27 16:54:1719458검색

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

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

이 튜토리얼의 운영 환경: 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의 e03b848252eb9375d56be284e690e873 태그처럼 동작합니다.

  • nowrap: 텍스트는 줄 바꿈되지 않으며 0c6dc11e160d3b678d68754cc175188a 태그가 나타날 때까지 텍스트가 같은 줄에 계속 표시됩니다.

  • pre-wrap: 공백 시퀀스를 유지하지만 일반적으로 줄을 바꿉니다.

  • pre-line: 공백 시퀀스를 병합하지만 개행은 유지합니다.

2. word-wrap 속성

word-wrap 속성을 사용하면 긴 단어나 URL 주소를 다음 줄로 넘길 수 있습니다.

Syntax

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.