我如何使用<code> tag in a table that does not wrap?

Question

On my Docusaurus page, I have markup like this that renders the following screenshot:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td><code>organizationName</code></td>
    <td>The GitHub user or organization that owns the repository. In the case of Docusaurus, that would be the "facebook" GitHub organization.</td>
  </tr>
  <tr>
    <td><code>projectName</code></td>
    <td>The name of the GitHub repository for your project. For example, Docusaurus is hosted at https://github.com/facebook/docusaurus, so our project name in this case would be "docusaurus".</td>
  </tr>
</table>

Note that the first table column are wrapped. I prefer them to not be wrapped so that it is easier to read. How do I make the <code> block level such that it does not wrap?

Answer 1

有两种方法可以做到这一点，每种方式都有自己的权衡，但都会产生相同的结果。

1。使用<pre>

将<pre>插入<code>。请注意，这不是编写HTML的标准方法。根据规范，<code>应该在<pre>内。这适用于Docusaurus网站。

<td><code>organizationName</code></td>

将改写为：

<td><code><pre>organizationName</pre></code></td>

2。添加定位<code> [推荐]

的自定义CSS

添加CSS

code.block {
  white-space: nowrap;
}

并且做：

<td><code class="block">organizationName</code></td>

第二种方式更清洁，我坚持了下来。由于我在<code>被用作表格的第一列时只遇到了问题，因此我使用了以下CSS，这也是Bootstrap website使用的。

table td:first-child > code {
  white-space: nowrap;
}

执行上述操作的好处是我可以对我的表使用Markdown语法，而不必为其添加自定义类：

| `organizationName` | The GitHub user ... |

最终结果