html은 태그의 스타일을 고려합니다.

아마도

 태그를 사용하고 있을 것입니다. 이것은 HTML 내의 공백이 실제로 표시되도록 하는 매우 특별한 태그입니다. 예를 들어 공백 4개는 실제로 공백 4개로 나타납니다. 이는 태그 사이의 공백을 하나로 압축하는 일반적인 태그와 다릅니다. 이러한 관점에서 <pre class="brush:php;toolbar:false"> 태그는 정말 유용합니다. <p style="padding: 0px; margin: 0px; color: rgb(51, 51, 51); font-family: 微软雅黑, " microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb></p><pre class="brush:php;toolbar:false"> 태그 안에 <code> 태그를 사용하고 있나요? <p></p>
<pre class="brush:php;toolbar:false"> 태그의 "per"는 "preformatted text"(미리 서식이 지정된 텍스트)를 의미하며, 내부 텍스트 내용에 대한 특별한 규정은 없습니다. <code> 태그의 의미는 태그 안의 텍스트가 코드임을 나타냅니다. 이것은 나에게 특히 유용합니다. 코드를 표시해야 할 때 사용합니다. 예는 다음과 같습니다. <pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

설명하자면:

<code> 코드 사이에 줄 바꿈이 있습니다. 이것도 빈 줄로 표시되는데, 이는 매우 짜증나는 일입니다. 이 문제를 해결하는 좋은 CSS 방법은 없습니다. 가장 좋은 방법은 <pre class="brush:php;toolbar:false"> 태그와 같은 줄에서 코드를 시작하거나 컴파일러를 사용하여 여기에서 줄 바꿈을 제거하는 것입니다. </p><p><img src="https://img.php.cn//upload/image/141/220/754/1499484133429984.jpg" title="1499484133429984.jpg" alt="html은 <pre class="brush:php;toolbar:false"> 태그의 스타일을 고려합니다."/></p><p   style="max-width:90%"Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);">글꼴 선택</p><p><pre class="brush:php;toolbar:false"> 태그는 주로 코드 블록을 표시하는 데 사용되며 코드는 일반적으로 고정 너비 글꼴을 사용하므로 <pre class="brush:php;toolbar:false"> 고정폭 글꼴로. </p><p>다행히도 브라우저 기본 글꼴은 이미 <pre class="brush:php;toolbar:false"> 고정 너비 글꼴로 설정되어 있으므로 아무 것도 할 수 없습니다. 물론 원하는 글꼴을 설정할 수도 있습니다. </p><p>다음은 "글꼴 스택"을 연구한 Michael Tuck이 2009년에 쓴 글입니다. 글꼴 스택은 글꼴 모음 태그에 글꼴 그룹을 나열하는 것을 의미하며, 선호하는 글꼴이 앞에 나열되고 대체 글꼴이 순서대로 나열됩니다. 그의 고정 폭 글꼴 스택은 크로스 플랫폼 시스템에 사전 설치된 글꼴을 잘 활용합니다. </p><pre class="brush:html;toolbar:false">font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", 
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

 태그의 스타일을 고려합니다."/></p><p>현재 글꼴 스택이 더 이상 사용되지 않는지 확실하지 않지만 어쨌든 좋은 시작입니다. </p><p>또한 맞춤 글꼴을 사용할 수도 있습니다. 또는 타사 서비스를 이용하세요. 이 글을 쓰는 동안 Typekit은 23개의 고정 폭 글꼴을 제공합니다. </p><p   style="max-width:90%"Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);">접을 것인가 말 것인가? </p><p>개인 취향에 관한 이야기인데 개인적으로 두 가지 상황이 있습니다. </p><p>에디터에서 코드를 작성할 때 가로 스크롤 막대 없이 코드가 자동으로 줄 바꿈되는 경향이 있습니다. 그리고 기사의 코드를 읽을 때 코드가 깨지지 않는 점이 마음에 듭니다. 나는 이것이 이상하다는 것을 안다. CodePen에서는 모든 사람이 각자의 선호도를 가지고 있기 때문에 사용자가 중단할지 여부를 선택할 수 있는 옵션을 제공합니다. </p><p><img src="https://img.php.cn//upload/image/839/197/758/1499484213362346.gif" title="1499484213362346.gif" alt="html은 <pre class="brush:php;toolbar:false"> 태그의 스타일을 고려합니다."/></p><p>코드를 표시할 때 줄바꿈 여부를 선택해야 합니다. 감싸기를 선택했다면 다행히 <pre class="brush:php;toolbar:false"> 태그에 제공된 고유한 스타일을 사용하여 다음과 같이 감싸는 동안 공백을 유지할 수 있습니다. </p><pre class="brush:html;toolbar:false">pre {
  white-space: pre-wrap;
}

로그인 후 복사

감싸기를 원하지 않으면 그럴 필요가 없습니다. 위와 동일한 작업을 수행합니다. 단, 줄이 너무 길면 어떻게 되는지 고려해야 합니다. 행이 너무 길면 고정 너비 컨테이너가 늘어나거나 해당 경계를 초과할 수 있습니다. 이를 방지하려면 가로 스크롤 막대를 추가하는 것이 좋습니다.

pre {
  overflow-x: auto;
}

 태그의 스타일을 고려합니다."/></p><p> 최대 높이를 지정하려면 <a href="http://www.php.cn/wiki/908.html" target="_blank">max-height</a>를 고려하고, 코드 블록이 너무 커지는 것을 방지하기 위해 모든 스크롤 막대를 허용하려면 Overflow:auto를 고려하는 것이 좋습니다. . </p><p   style="max-width:90%"Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);">적응형으로 만들어야 할 수도 있습니다</p><p>당신을 포함한 일부 사람들은 줄 바꿈이나 스크롤을 좋아하지 않습니다. 이런 상황에도 해결책이 있습니다. 기본 컨테이너 너비를 <pre class="brush:php;toolbar:false"> 유지할 수 있지만 상호 작용 중에 확장되도록 허용할 수 있습니다. </p><pre class="brush:html;toolbar:false">pre:hover,
pre:focus {
  width: min-content;
}

로그인 후 복사