Technical Documentation Page <code> text overflowing

Hi guys!

My technical documentation page has the problem of text overflowing outside the container when the window is resized, like this (screenshot): https://ibb.co/9gfdbLs

Here’s my code: https://codepen.io/zoeylxm/pen/abvEGjM

Is there any way to constraint the text inside the container? Or it’s better to leave it as it is? I’ve tried word-wrap and white-space, but it doesn’t seem to be working. Appreciate any pointers! Thank you.

Take a look at the min-width property, it has some values that should accommodate this behavior.

2 Likes

I would suggest setting the overflow scroll option instead of trying to wrap the text.

This is a personal preference for me, but as a user, when I am reading technical documentation, especially when it contains code or configuration examples, the structure of the code makes it easier to read and comprehend.

If you wrap this structure, it makes things harder to understand.

2 Likes

Thank you! I’ve applied overflow:auto; to my css and it looks pretty great. Appreciate your help :slight_smile:

3 Likes

My pleasure! Glad that you were able to figure it out.