How to avoid this white space problem using code block pro ?

[rodrigomc2000]

Hello everyone :)

My JSON example have a large link:

https://pps.whatsapp.net/v/t61.24694-24/323970788_1137981286878828_1882391295127733628_n.jpg?stp=dst-jpg_s96x96&ccb=11-4&oh=01_AdRIhDQmoDnnUAXJdVlRp9eCiVzLdQK5ogchK1GhiSLnAw&oe=6534E077&_nc_sid=000000&_nc_cat=101

And it's causing a horizontal scroll in front end:

But in page builder show correct:

How to fix this?

Thanks

[KevinBatdorf]

It's designed to scroll like that intentionally. I'm going to look into adding it as an option but its a bit complicated to get it working with all the other features (like line highlighting, for example)

If you wants to share a link to your site I can look at it. You can also try css like this:

div[class*='code-block-pro']:not(.x) pre {
    padding-right: 12px !important;
}
div[class*='code-block-pro']:not(.x) pre code {
    white-space: normal !important;
}

[rodrigomc2000]

Hey Kevin thanks for reply!

I tried this custom css ! it works but remove all tab indent of the code.

[KevinBatdorf]

In place of "white-space: normal" go here and try out the other options to find the best one. Maybe pre-wrap?

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

You have some text there that's not simple to break so it might not work.

[bugnumber9]

Just wanted to confirm that white-space: pre-wrap is what works best.

[KevinBatdorf]

What ever the default I have there is what works best. If you to customize it though then you can try one of the other options.