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:php;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><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/141/220/754/1499484133429984.jpg?x-oss-process=image/resize,p_40" class="lazy" title="1499484133429984.jpg" alt="html은 <pre class="brush:php;toolbar:false"> 태그의 스타일을 고려합니다."></p><p   style="max-width:90%" microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb>글꼴 선택</p><p></p><pre class="brush:php;toolbar:false"> 태그는 주로 코드 블록을 표시하는 데 사용되며 코드는 일반적으로 고정 너비 글꼴을 사용하므로 <pre class="brush:php;toolbar:false"> 고정폭 글꼴로. <p>다행히도 브라우저 기본 글꼴은 이미 </p><pre class="brush:php;toolbar:false"> 고정 너비 글꼴로 설정되어 있으므로 아무 것도 할 수 없습니다. 물론 원하는 글꼴을 설정할 수도 있습니다. <p>다음은 "글꼴 스택"을 연구한 Michael Tuck이 2009년에 쓴 글입니다. 글꼴 스택은 글꼴 모음 태그에 글꼴 그룹을 나열하는 것을 의미하며, 선호하는 글꼴이 앞에 나열되고 대체 글꼴이 순서대로 나열됩니다. 그의 고정 폭 글꼴 스택은 크로스 플랫폼 시스템에 사전 설치된 글꼴을 잘 활용합니다. </p><pre class='brush:php;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 sans gb tahoma arial white-space: normal background-color: rgb>접을 것인가 말 것인가? </p><p>개인 취향에 관한 이야기인데 개인적으로 두 가지 상황이 있습니다. </p><p>에디터에서 코드를 작성할 때 가로 스크롤 막대 없이 코드가 자동으로 줄 바꿈되는 경향이 있습니다. 그리고 기사의 코드를 읽을 때 코드가 깨지지 않는 점이 마음에 듭니다. 나는 이것이 이상하다는 것을 안다. CodePen에서는 모든 사람이 각자의 선호도를 가지고 있기 때문에 사용자가 중단할지 여부를 선택할 수 있는 옵션을 제공합니다. </p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/839/197/758/1499484213362346.gif?x-oss-process=image/resize,p_40" class="lazy" title="1499484213362346.gif" alt="html은 <pre class="brush:php;toolbar:false"> 태그의 스타일을 고려합니다."></p><p>코드를 표시할 때 줄바꿈 여부를 선택해야 합니다. 감싸기를 선택했다면 다행히 </p><pre class="brush:php;toolbar:false"> 태그에 제공된 고유한 스타일을 사용하여 다음과 같이 감싸는 동안 공백을 유지할 수 있습니다. <pre class='brush:php;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 sans gb tahoma arial white-space: normal background-color: rgb>적응형으로 만들어야 할 수도 있습니다</p><p>당신을 포함한 일부 사람들은 줄 바꿈이나 스크롤을 좋아하지 않습니다. 이런 상황에도 해결책이 있습니다. 기본 컨테이너 너비를 </p><pre class="brush:php;toolbar:false"> 유지할 수 있지만 상호 작용 중에 확장되도록 허용할 수 있습니다. <pre class='brush:php;toolbar:false;'>pre:hover, pre:focus { width: min-content; }

태그의 스타일을 고려합니다."></p><p style="max-width:90%" microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb>如果在 email 中怎么办？</p><p>也许因为某些原因，你的 HTML 在 email 中使用。一些标签在 email 中可能会有问题，因为你的 css 在 email 中不生效，因此当特别长的不换行的文本存在时，可能会破坏掉 email 的布局。</p><p>在 CSS-Tricks, 我必须要用 RSS feed 自动生成电子报刊，因此我生成 RSS feed 时要一个特殊处理 HTML，保证对所有的 </p><pre class="brush:php;toolbar:false"> 标签强制添加一个 inline 样式如下：<p></p><pre style="white-space: pre-wrap;">

这是我所能做的保证代码块中很长的一行不会破坏掉布局。（一般我们除了加上面的那个外，还加上 word-wrap: break-word 和 word-break: break-all—— 译者注）

你需要代码语法高亮吗？

网上不乏各种语法高亮方案，你可以搜索自己喜欢的方案。我个人推崇 Prism.js，因为：

它代码量少。

它无依赖。

它对标签的 class 起名起的好。

它允许你 copy 它的代码自己修改和定制。

태그의 스타일을 고려합니다."></p><p>除非从 server 端直接生成 <span> 的样式（用来语法分色），不然 Prism.js 已经足够好了。</span></p><p style="max-width:90%" microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb>你标注了代码是什么语言了吗？</p><p>我个人比较喜欢在代码块上标准出使用的语言。</p><p>比如：</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/452/866/390/1499484295576952.png?x-oss-process=image/resize,p_40" class="lazy" title="1499484295576952.png" alt="html은 <pre class="brush:php;toolbar:false"> 태그의 스타일을 고려합니다."></p><p>标记出语言的其中一种方式是通过 data-* 属性（可能你的语法高亮工具也已经要求你标记出）然后显示它，例如：</p><pre class='brush:php;toolbar:false;'><pre data-lang="HTML"><code> <h1 id="Example-nbsp-code">Example code</h1> <code>

pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
}

我想这也不是一种特别简单的方法，所以可能一些人只是简单在代码里注释一下。也许用 title 属性是更好的选择？

控制空格

如果你使用 tab 来缩进，你可能会觉得缩进太宽了。

默认情况下，tab 被按照 8 个空格来渲染，这很荒唐。

태그의 스타일을 고려합니다."></p><p>在写代码的时候，我们通常让 tab 宽度为 4 个空格。幸运地，你可以用样式控制它：</p><pre class='brush:php;toolbar:false;'>pre { tab-width: 4; }

就我个人而言，我喜欢直接用空格缩进。

Other options

其他选择

努力让代码块很好地展示在网页上可不是一件琐事，它是值得做的工作。如果你不想自己做这些工作，CodePen 提供了内嵌版可以很好地演示代码（还可以预览），内嵌 GitHub Gists 也是一个不错的选择

위 내용은 html은 태그의 스타일을 고려합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!