Are you sure this is correct as bootstrap already has classes for this with word-wrap: break-word;

hi,
tested this on my site - works perfectly! Thanks

Are you sure this is correct as bootstrap already has classes for this with word-wrap: break-word;

Yes, I saw this, but that would mean the user needs to put the class in each pre block he/she inserts in an article. That is probably not really handy...

hi,
tested this on my site - works perfectly! Thanks

@jschmi102 You mean you have applied the change and run npm to compile the scss again and tested with success?

If so: Could you mark your test result by going to this PR in the issue tracker here https://issues.joomla.org/tracker/joomla-cms/32322 , then use the "Test this" button, select the right test result and then submit? Thanks in advance, and thanks for testing.

I have tested this item ✅ successfully on f9a39a6

tested with some of my sample articles

I don't think that this is the right solution for the problem. There are good reasons for <pre> tags not wrapping text. They are used to display code and other things where you want to have exactly the format you specified in the source. Automatic line breaks would be misleading in many cases.
If a <pre> tag is wider than the space it may use, it usually gets a vertical scrollbar. This is the case if you look at an article in the "article" view:

The problem that destroys the layout only seems to occur in blog/featured layouts:

IMO, overflow: auto at the right place might be a better fix. I'm going to have a look where to put that.

Proposing #32335 as an alternative.

Closing this in favour of #32335