>  기사  >  웹 프론트엔드  >  단어 분리 작업 줄 바꿈의 차이점 소개

단어 분리 작업 줄 바꿈의 차이점 소개

高洛峰
高洛峰원래의
2017-03-04 10:29:221638검색

word-break: [Word Break]

정의: 자동 줄 바꿈 처리 방법을 지정합니다. 참고: word-break를 사용하면 브라우저를 만들 수 있습니다. 언제든지 라인을 변경할 수 있습니다. 위치 랩.

문법: 단어 구분: 일반|break-all|keep-all;

默认值 normal
继承性 yes
版本 css3
Javascript语法 object.style.wordBreak="keep-all"

描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。


호환성:

word-break work-wrap的区别示例介绍

예:

<span class="text-s">iIanishttp://www.php.cn/;/span>    
.text-s {    
    display: inline-block;    
    width: 240px;    
    // word-break: keep-all;    
}

단어 분리가 설정되지 않음:

word-break work-wrap的区别示例介绍

단어 분리가 설정됨: break-all;

word-break work-wrap的区别示例介绍

word-break:keep-all; 또는 word-break:normal;

word-break work-wrap的区别示例介绍

word-wrap:【Line Wrap】

정의: 긴 단어나 URL 주소가 다음 줄로 넘어가도록 허용합니다.

구문: word-wrap: Normal|break-word;

기본값: normal
상속: yes
버전: CSS3
자바스크립트 구문:
默认值: normal
继承性: yes
版本: CSS3
JavaScript 语法:

object.style.wordWrap="break-word"

객체. .wordWrap="break-word"


描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

호환성:

word-break work-wrap的区别示例介绍

예: [위와 동일]

word-wrap이 설정되지 않음:

word-break work-wrap的区别示例介绍

word-wrap이 설정됨: Normal;

word-break work-wrap的区别示例介绍

Set word-wrap:break-word;

word-break work-wrap的区别示例介绍

위 밤 설정 비교 word -break:break-all;과 word-wrap:break-word

word-break work-wrap的区别示例介绍

요약:

단어 나누기: 줄 끝에 단어를 넣을 수 없는 경우 줄 안에 단어를 넣을 방법을 결정합니다. => 단어가 줄 끝에 올 수 없을 때 단어를 새 줄로 나눌지 여부를 결정합니다. 문장 끝에 배치

break-all: 강제적으로 배치합니다. 나머지 항목을 압착할 수 없는 경우 다음 줄에 표시됩니다.

keep-all: 맞지 않으면 다른 줄에 표시하고, 그래도 맞지 않으면 Overflow를 표시합니다.

word-wrap: 줄 끝이 맞지 않는 경우 단어 내에서 줄 바꿈 허용 여부 결정 => 단어 내에서 단어 줄 바꿈 방법 결정

Normal: 단어는 너무 길면 단어가 새 줄로 줄바꿈됩니다. 두 줄 이상이면 오버플로가 표시됩니다.

break-word: 단어가 너무 길면 먼저 줄 바꿈을 시도하세요. 줄 바꿈 후에도 여전히 너무 길면 단어 내에서 줄을 바꿀 수도 있습니다.

추가 사항: 양쪽 끝에서 텍스트 정렬

속성: text-align:justify;

호환성: 매우 나쁨

word-break work-wrap的区别示例介绍

텍스트 정렬:센터;

word-break work-wrap的区别示例介绍

텍스트 정렬:정렬;

word-break work-wrap的区别示例介绍

위의 word-break work-wrap 차이점에 대한 간략한 분석은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 웹사이트에 많은 지원 부탁드립니다.

word-break work-wrap과 관련 기사의 차이점에 대한 더 많은 예를 보려면 PHP 중국어 웹사이트를 주목하세요!

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