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

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

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

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

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

<div>
   A bunch of words you see.
</div>

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

div {
  white-space: normal; 
}

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

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

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

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

로 텍스트를 래핑한 것처럼 동작하기 때문입니다. pre> 태그(pre 태그는 기본적으로 공백과 줄바꿈을 처리할 수 있음) HTML에서는 공백이 완벽하게 허용되며 코드에 닫는 태그가 나타날 때까지 텍스트가 줄바꿈되지 않습니다. 이는 코드를 문자 그대로 표시할 때 특히 유용하며, 특정 서식에서 미학적 이점을 얻습니다(공백에 의존하는 언어에서와 같이 특정 시간은 절대적으로 중요합니다!) <p> 아마도 공백과 줄바꿈을 사전 처리하는 방식이 마음에 들 수도 있지만, 상위 컨테이너에서 잠재적으로 중단되는 대신 텍스트를 래핑해야 합니다. 그게 공백입니다: pre-wrap;: </p><p style="text-align: center;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/105/257/554/1541067162420362.png?x-oss-process=image/resize,p_40" class="lazy" title="154106714723229CSS의 텍스트 요소 내에 빈 여백을 설정하는 방법은 무엇입니까?" alt="CSS의 텍스트 요소 내에 빈 여백을 설정하는 방법은 무엇입니까?"></p><p> 마지막으로 공백: pre-line; 은 코드가 끊어진 줄을 끊지만 여전히 추가 공백을 제거합니다. </p><p   style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/105/257/554/1541067162420362.png?x-oss-process=image/resize,p_40" class="lazy" title="1541067162420362.png" alt="CSS의 텍스트 요소 내에 빈 여백을 설정하는 방법은 무엇입니까?"></p><p>흥미롭게도 끝 부분의 줄 바꿈은 존중되지 않습니다. CSS 2.1 사양에 따르면 "보존된 줄바꿈에서 줄바꿈, 필요에 따라 줄 상자 채우기"라고 되어 있습니다. </p><p>다음은 다양한 모든 값의 동작을 이해하는 표입니다. </p><p><img src="https://img.php.cn//upload/image/559/282/528/154106720696370CSS%EC%9D%98%20%ED%85%8D%EC%8A%A4%ED%8A%B8%20%EC%9A%94%EC%86%8C%20%EB%82%B4%EC%97%90%20%EB%B9%88%20%EC%97%AC%EB%B0%B1%EC%9D%84%20%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C??x-oss-process=image/resize,p_40" title="154106720696370CSS의 텍스트 요소 내에 빈 여백을 설정하는 방법은 무엇입니까?" alt="CSS의 텍스트 요소 내에 빈 여백을 설정하는 방법은 무엇입니까?"></p><p>CSS3에서 공백 속성은 실제로 해당 차트를 따르고 속성을 그에 따라 text-space-collapse 및 text-wrap에 매핑합니다. </p><p><strong>호환성</strong></p><p>표의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다. </p><p   style="max-width:90%"><img src="https://img.php.cn//upload/image/701/412/507/154106728525391CSS%EC%9D%98%20%ED%85%8D%EC%8A%A4%ED%8A%B8%20%EC%9A%94%EC%86%8C%20%EB%82%B4%EC%97%90%20%EB%B9%88%20%EC%97%AC%EB%B0%B1%EC%9D%84%20%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C??x-oss-process=image/resize,p_40" title="154106728525391CSS의 텍스트 요소 내에 빈 여백을 설정하는 방법은 무엇입니까?" alt="CSS의 텍스트 요소 내에 빈 여백을 설정하는 방법은 무엇입니까?"></p><p>요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. </p>

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