>웹 프론트엔드 >CSS 튜토리얼 >CSS는 강제 비줄바꿈/자동 줄바꿈/강제 줄바꿈을 구현합니다.

CSS는 강제 비줄바꿈/자동 줄바꿈/강제 줄바꿈을 구현합니다.

高洛峰
高洛峰원래의
2016-11-24 11:30:261452검색

줄 바꿈 없음 강제 적용 div{
white-space:nowrap;
}

자동으로 줄 바꿈

div{
word-wrap: break- word ;
word-break: 일반;
}

영어 단어 줄바꿈 강제

div{
word-break:break-all;
}


CSS 설정은 래핑되지 않습니다.


overflow:hidden hide
white-space: 일반 기본값
사전 래핑 및 기타 공백 문자는 보호됩니다
nowrap은 텍스트가 끝나거나 br 개체를 만날 때까지 모든 텍스트를 같은 줄에 표시하도록 강제합니다


강제 줄 바꿈 설정:
단어 -break:
normal; 아시아 및 비아시아 언어에 대한 텍스트 규칙에 따라 단어 내 줄 바꿈을 허용합니다.
break-all: 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.
keep-all : 모든 비아시아 언어에 대한 일반 값과 ​​동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 소량의 아시아 텍스트가 포함된 비아시아 텍스트와


줄바꿈 없는 영어

단어 나누기 추가: break-all 사이의 높이 솔루션에 적합합니다. CSS에서 문제가 해결되었습니다. 이 문제는 IE에서만 발생합니다. FF에서 테스트할 때 FF는 자체적으로 스크롤 막대를 추가할 수 있으며 이는 효과에 영향을 미치지 않습니다.

Skin을 수행할 때 word-break: break-all을 추가하는 것을 권장합니다. ; 본문에서는 작동합니다. 영어로 인해 IE 프레임이 늘어나는 문제를 해결합니다.

다음은 word-break의 지침을 인용한 것입니다. word-break는 IE5+의 고유 속성입니다

구문:

word-break : Normal | break-all | keep-all

매개변수:

normal: 아시아인 및 비아시아인의 텍스트 규칙에 따름 언어에서는 단어 내 줄바꿈이 허용됩니다.
break-all: 동작은 아시아 언어의 경우와 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.
keep-all : 모든 비아시아 언어에 대한 일반 값과 ​​동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 소량의 아시아 텍스트가 포함된 비아시아 텍스트에 적합합니다.

설명:

개체 내 텍스트에 대한 단어 내 줄 바꿈 동작을 설정하거나 검색합니다. 특히 여러 언어가 나타날 때.
중국어의 경우 break-all을 사용해야 합니다.
해당 스크립트 기능은 wordBreak입니다. 제가 쓴 다른 책들도 참조해 주세요.

예:

div {word-break : break-all; }
IE6을 호환시키려는 경우: div {WORD-WRAP:break-word;word-break: 휴식 -모두 }


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