CSS는 텍스트 줄 바꿈 및 자르기를 제어합니다.

이번에는 CSS로 제어되는 텍스트의 줄 바꿈 및 자르기에 대해 알려드리겠습니다. CSS를 사용하여 텍스트 줄 바꿈 및 자르기를 제어할 때 주의 사항은 무엇입니까?

줄 바꿈 및 자르기에 대한 일부 CSS 속성

word-wrap: Normal | break-word

normal 일반 줄 바꿈, 긴 단어나 긴 숫자 등으로 인해 콘텐츠가 컨테이너를 깨뜨릴 수 있음
break - 단어는 줄 바꿈의 기초로 단어를 사용합니다. 필요한 경우 단어 내에서 줄 바꿈이 허용됩니다

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

normal 줄 바꿈이 있으면 내용이 깨질 수 있습니다. , 긴 단어 또는 긴 숫자와 같은 상황

break-all은 줄바꿈의 기초로 문자를 사용합니다.

keep-all은 중국어 및 영어의 일반과 동일합니다.

white-space: Normal || | nowrap || pre-line || pre-wrap ||

일반 기본값을 상속받으며, 공백은 브라우저에서 무시됩니다.

사전 공백은 브라우저에서 유지되며 해당 동작은

 HTML의 태그

nowrap 텍스트는 줄 바꿈되지 않으며 텍스트는 같은 줄에 있습니다. 
 태그가 나타날 때까지 
pre-wrap 공백 시퀀스를 유지하지만 정상적으로 줄 바꿈합니다(IE7은 지원되지 않음) 
pre-line 공백 시퀀스를 병합하지만 개행 문자는 유지합니다(IE7은 지원하지 않음) 지원)
inherit는 공백 속성의 값이 상위 요소에서 상속되어야 한다고 규정합니다(IE는 이를 지원하지 않음)
Application : 
텍스트 오버플로 표시 생략 표시(...): 
text-overflow : 
overflow: Hidden; 
white-space: nowrap; 
/* 줄바꿈 기준으로 단어 사용*/ word-wrap: break-word; word-break: 일반 ; /* 줄바꿈 기준으로 문자 사용*/ word-break: break-all; 


 텍스트가 깨지지 않도록 강제됨: 


white-space: nowrap 이 기사의 사례를 읽으신 후 마스터하셨다고 생각합니다. 방법, 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서! 추천 자료: 
CSS3을 사용하여 사진의 마우스 부동 확대 구현


IE8에서 nth-child() 호환성 문제를 처리하는 방법

CSS가 사라지는 문제를 처리하는 방법 경계선
위 내용은 CSS는 텍스트 줄 바꿈 및 자르기를 제어합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!