[Resolved] GP BBP BUG fix: Dealing with long unbroken titles and content in BBpress

[Max]

Tom

If someone types a long unbroken title, or has a long unbroken string of text in a BBpress topic reply it breaks out of the native GP theme. A very long URL included in the content can cause the same issue. If one has bbpress widgets displaying in a sidebar or footer for recent replies of recent topics the titles displayed in those will also break out of the sidebar.

I have put together the following code to fix this:

/*breaks and wraps bbp title in widgets if long unbroken word inserted in topic title or reply.*/
.widget .bbp-forum-title,.widget .bbp-reply-topic-title { max-width:225px; display: inline-block; word-wrap:break-word; word-break: break-word;}

/*will need to increase this from 400px if make page wider*/
#bbpress-forums li.bbp-topic-title, #bbpress-forums div.bbp-reply-content { 
    max-width:400px; display: inline-block; word-wrap:break-word; word-break: break-word;}

#bbpress-forums div.bbp-reply-content { max-width:580px; display: inline-block; word-wrap:break-word; word-break: break-word;}

It all works as it should EXCEPT in the replies created page located in the front end bbpress user profile.

From what I can see in Firebug the content there has the #bbpress-forums div.bbp-reply-content identify however the content area is much narrower than a regular topic reply because of the profile page sidebar.

Tom, I would be grateful if you could check my CSS above and also tell me what identifier I should use to break the reply content that appears in the replies created page of the bbp front end user profile.

Kind Regards

Max

• This topic was modified 6 years, 8 months ago by Max.

[Max]

here is a long unbroken text string for testing purposes:

zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

[Tom]

I wonder why this wouldn’t work?:

#bbpress-forums {
    word-wrap: break-word;
}

That should apply to everything inside bbPress.

Here’s a screenshot of the change on your text post: http://screencast.com/t/xfl3EQilJWN

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

I am off to bed will test it in the morning. However, from what i have read word-wrap: break-word; does not work on all browsers?

[Tom]

This might help if you need more browser compatibility: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

This works in FF, IE8910, and Chrome:

#bbpress-forums {
    word-wrap: break-word;
    word-break: break-word;
}

Thanks for editing down my mess into a single line.

Maybe you should add it to your style sheet?

Kind Regards

Max

[Tom]

I’ll consider it, but it’s not a very common thing to have massive non-breaking words 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts