3

I am using Skeleton CSS in my project for styling and I noticed that the CSS library has issue with long text inside <pre><code></code></pre> element in which the border box does not cover the entire code (example is in grid code section, please also refer to below image). How do I make sure it's something like GitHub <pre><code></code></pre> below? That is, the box is still displayed until end of the line of the code using Skeleton CSS. thank you very much in advance.

<pre><code>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</code></pre>

skeleton CSS

isherwood
  • 58,414
  • 16
  • 114
  • 157
doppo
  • 137
  • 1
  • 9

2 Answers2

1

Just found the solution which is to add overflow-x: scroll; style to the <code></code> tag

i.e. <code class="code-example-body prettyprint" style="overflow-x: scroll;"></code>

doppo
  • 137
  • 1
  • 9
1

How do I make sure [...] the box is still displayed until end of the line of the code

To achieve this effect, you can take advantage of CSS Intrinsic Sizing values like:

  • max-content
  • min-content
  • fit-content

In this instance, you can declare:

min-width: max-content

Working Example:

pre {
  padding: 0 6px;
  border: 1px solid rgb(255, 0, 0);
  box-sizing: border-box;
}

pre.with-intrinsic-sizing {
  min-width: max-content;
}
<pre>
<code>
Line of code
Line of code with more text in it.
Line of code with even more text in it and... hopefully there is now enough text in it that the text will extend beyond the right-hand edge of the viewport, even when you expand the snippet to Full Page view.
</code>
</pre>

<pre class="with-intrinsic-sizing">
<code>
Line of code
Line of code with more text in it.
Line of code with even more text in it and... hopefully there is now enough text in it that the text will extend beyond the right-hand edge of the viewport, even when you expand the snippet to Full Page view.
</code>
</pre>

Further Reading

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 1
    hello @Rounin, thank you very much for taking your time to help :) I think in my case `overflow-x: scroll` is sufficient. If I have different requirements, I'll definitely implement your solution. Thank you once again! – doppo Dec 04 '21 at 13:52
  • 1
    No worries, @doppo. Happy to help you (and any other future readers who come across this page with approximately the same problem)! – Rounin Dec 04 '21 at 15:57