>웹 프론트엔드 >CSS 튜토리얼 >줄 바꿈 없이 CSS 구현하기, 자동 줄 바꿈, 강제 줄 바꿈_체험교환

줄 바꿈 없이 CSS 구현하기, 자동 줄 바꿈, 강제 줄 바꿈_체험교환

WBOY
WBOY원래의
2016-05-16 12:05:121747검색

줄바꿈 금지

div{
white-space:nowrap;
}

자동 줄 바꿈

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

영어 단어 줄바꿈 강제

div{
word-break:break-all; 🎜>


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


overflow:hidden Hide
white-space: Normal 기본
pre 줄 바꿈 및 기타 공백 문자는 보호받으세요
nowrap은 텍스트가 끝나거나 br 개체를 만날 때까지 모든 텍스트를 같은 줄에 표시하도록 강제합니다.


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



영어 줄 바꿈 안 함

단어 나누기 추가: break-all in; 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 }

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