CSS의 텍스트 요소 내에 빈 여백을 설정하는 방법은 무엇입니까?

CSS의 텍스트 요소 내에 공백 여백을 설정하는 방법은 무엇입니까? 이번 글에서는 CSS를 사용하여 텍스트 요소에 공백 채우기를 설정하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

오늘은 CSS의 공백 속성을 통해 텍스트 요소 내에 공백 채우기를 설정하는 방법을 소개하겠습니다. 공백 속성을 살펴보겠습니다.

white-space 속성은 적용되는 요소에서 텍스트가 처리되는 방식을 제어하고 요소 내의 공백이 처리되는 방식을 설정합니다.

다음과 같이 HTML을 만들어 보겠습니다.

 A bunch of words you see. 

div 너비를 100px로 설정합니다. 적당한 글꼴 크기에서 100px에 맞게 텍스트를 더 추가하세요. 아무 작업도 수행하지 않습니다. 기본 공백 값은 정상이며 텍스트가 줄바꿈됩니다.

div { white-space: normal; }

렌더링을 살펴보겠습니다.

텍스트가 줄 바꿈되는 것을 방지하려면공백: nowrap;

을 사용할 수 있습니다. 참고: html 코드 예제에서 실제로 이 글의 맨 위에는 두 개의 줄 바꿈이 있는데, 하나는 텍스트 줄 앞, 하나는 코드에서 자체 줄에 텍스트를 표시할 수 있도록 하는 것입니다. 텍스트가 브라우저에 렌더링되면 이러한 줄 바꿈이 제거되는 것과 같습니다. 또한 첫 글자 앞의 추가 공백도 제거됩니다. 브라우저가 새 줄과 추가 공백 문자를 표시하도록 하려면white-space: pre;

pre를 사용할 수 있습니다. 이는

로 텍스트를 래핑한 것처럼 동작하기 때문입니다. pre> 태그(pre 태그는 기본적으로 공백과 줄바꿈을 처리할 수 있음) HTML에서는 공백이 완벽하게 허용되며 코드에 닫는 태그가 나타날 때까지 텍스트가 줄바꿈되지 않습니다. 이는 코드를 문자 그대로 표시할 때 특히 유용하며, 특정 서식에서 미학적 이점을 얻습니다(공백에 의존하는 언어에서와 같이 특정 시간은 절대적으로 중요합니다!) 
 아마도 공백과 줄바꿈을 사전 처리하는 방식이 마음에 들 수도 있지만, 상위 컨테이너에서 잠재적으로 중단되는 대신 텍스트를 래핑해야 합니다. 그게 공백입니다: pre-wrap;: 
 마지막으로 공백: pre-line; 은 코드가 끊어진 줄을 끊지만 여전히 추가 공백을 제거합니다. 
흥미롭게도 끝 부분의 줄 바꿈은 존중되지 않습니다. CSS 2.1 사양에 따르면 "보존된 줄바꿈에서 줄바꿈, 필요에 따라 줄 상자 채우기"라고 되어 있습니다. 
다음은 다양한 모든 값의 동작을 이해하는 표입니다. 
CSS3에서 공백 속성은 실제로 해당 차트를 따르고 속성을 그에 따라 text-space-collapse 및 text-wrap에 매핑합니다. 
호환성
표의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다. 
요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 

위 내용은 CSS의 텍스트 요소 내에 빈 여백을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!