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.
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.
Thank you! I’ve applied
overflow:auto; to my css and it looks pretty great. Appreciate your help
My pleasure! Glad that you were able to figure it out.