<code>white-space: pre;</code>
<table class="pre">
<tbody>
<tr>
<td>1</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere nisi at enim vehicula faucibus. Sed lobortis malesuada finibus. Nunc bibendum id erat nec aliquet. Aenean convallis gravida nisi dapibus facilisis. Proin gravida consectetur porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales odio maximus orci vulputate, non aliquet felis ornare. Nunc convallis orci eget urna laoreet, sit amet suscipit arcu interdum. Nam vel ante tellus.</td>
</tr>
<tr>
<td>2</td>
<td>Curabitur sed volutpat tortor, molestie faucibus justo. Praesent at massa vitae felis interdum ultricies ac at ante. Curabitur lobortis, urna nec sodales mattis, nibh velit rhoncus mauris, in sagittis odio eros ut velit. Mauris a cursus sem. Integer id varius nisi. Nullam posuere molestie blandit. Donec dapibus elementum ex sit amet hendrerit.</td>
</tr>
</tbody>
</table>
<code>white-space: normal;</code>
<table class="normal">
<tbody>
<tr>
<td>1</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere nisi at enim vehicula faucibus. Sed lobortis malesuada finibus. Nunc bibendum id erat nec aliquet. Aenean convallis gravida nisi dapibus facilisis. Proin gravida consectetur porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales odio maximus orci vulputate, non aliquet felis ornare. Nunc convallis orci eget urna laoreet, sit amet suscipit arcu interdum. Nam vel ante tellus.</td>
</tr>
<tr>
<td>2</td>
<td>Curabitur sed volutpat tortor, molestie faucibus justo. Praesent at massa vitae felis interdum ultricies ac at ante. Curabitur lobortis, urna nec sodales mattis, nibh velit rhoncus mauris, in sagittis odio eros ut velit. Mauris a cursus sem. Integer id varius nisi. Nullam posuere molestie blandit. Donec dapibus elementum ex sit amet hendrerit.</td>
</tr>
</tbody>
</table>
要通过用户样式表覆盖它并在GitHub中启用自动换行,只需在<td> s上覆盖该规则:
#repo-content-turbo-frame .blob-code-content td.blob-code {
white-space: normal !important;
}
2条答案
按热度按时间bttbmeg01#
这是因为GitHub查看器中包含代码行的
td.blob-code
表格单元格具有CSS规则white-space: pre
,无论如何都可以强制防止白色处中断(它还覆盖了width
等属性)要通过用户样式表覆盖它并在GitHub中启用自动换行,只需在
<td>
s上覆盖该规则:42fyovps2#
代码行的CSS使用
white-space: pre
,这意味着文本将按照源标记中的原样呈现,按字面意思解释换行符和换行符标记,并且不会自动应用其他换行。如果你想在GitHub的文件查看器中的编辑模式之外应用软 Package ,你需要编写一个userstyle或userscript。
例如,下面的CSS使行在80个字符处换行,如果视口足够宽,不会溢出,并且在任何点处换行可以防止溢出:
在撰写本文时,所选元素的HTML类属性是
blob-code blob-code-inner js-file-line
。我从这些元素中选择了js-file-line
(根据其特定的命名,它似乎最有可能不用于其他目的)。您可能也有兴趣使用
width
而不是max-width
,这将使软 Package 始终以指定的宽度进行 Package ,即使由于视口宽度足够小而导致溢出。whitespace: break-spaces
参见MDN了解更多信息。如何将其注入到您的网页中取决于您。如果您使用Tampermonkey,您可以使用
GM_addStyle
.ex。奖金历史:很久以前有一个功能请求:Feature Request: allow toggling "soft wrap" on and off when viewing files #1982。