Как использовать тег <code> в таблице без переноса?
На моей странице Docusaurus у меня есть подобная разметка, которая отображает следующий снимок экрана:
<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>
Обратите внимание, что первый столбец таблицы обернут. Я предпочитаю, чтобы их не заворачивали, чтобы было легче читать. Как мне сделать уровень блока <code> таким, чтобы он не переносился?
🤔 А знаете ли вы, что...
HTML поддерживает ссылки (гиперссылки) для перехода с одной страницы на другую.
Ответ:
Есть два способа сделать это, каждый со своими компромиссами, но оба дают одинаковый результат.
1. Используйте <pre>
Вставьте <pre> в <code>. Обратите внимание, что это не стандартный способ написания HTML. Согласно спецификации, <code> должен находиться внутри <pre>. Это работает для сайта Docusaurus.
<td><code>organizationName</code></td>
вместо этого будет записано как:
<td><code><pre>organizationName</pre></code></td>
2. Добавьте настраиваемый таргетинг CSS <code> [РЕКОМЕНДУЕТСЯ]
Добавьте CSS
code.block {
white-space: nowrap;
}
и делать:
<td><code class = "block">organizationName</code></td>
Второй способ чище, и я остановился на нем. Поскольку я столкнулся с проблемой только тогда, когда <code> использовался в качестве первого столбца в таблице, я использовал следующий CSS, который также использует Сайт Bootstrap.
table td:first-child > code {
white-space: nowrap;
}
Преимущество выполнения вышеизложенного заключается в том, что я могу использовать синтаксис Markdown для своей таблицы, и мне не нужно добавлять в нее собственные классы:
| `organizationName` | The GitHub user ... |
