How to Soft-wrap code on GitHub website on the on the-CodePudding

When I'm looking at a text file on GitHub.com, how can I make it wrap the lines instead of having horizontal scroll?

In the GitHub website editor, I can choose the option "Soft Wrap" from a top-right drop down, but there is no such drop down, nor any option anywhere on the page that I can find, to also wrap lines when just viewing code.

I've tried to write user stylesheets to customise the appearance, but manually setting the width of the <td> that the line of code is in or the <table> that the code and line numbers are in doesn't actually change the width of that element, and setting different overflow values here doesn't change the behaviour either.

CodePudding user response：

This is because the td.blob-code table cells containing code lines in GitHub viewer have the CSS rule white-space: pre, which forcefully prevents breaking at white space no matter what (it also overrides width etc. properties)

table.pre td {
  white-space: pre;
}

table.normal td {
  white-space: normal;
}

<code>white-space: pre;</code>
<table >
  <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 >
  <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>

To overwrite this via a user stylesheet and enable word-wrapping in GitHub, simply overwrite that rule on the <td>s:

#repo-content-turbo-frame .blob-code-content td.blob-code {
  white-space: normal !important;
}