Text is expanding outside the container

Support
#1

The Forums on my website are part of a membership.

Some of the text in a recent forum post went outside the container. In general, why does this happen and how can I fix it?

I don’t want to provide a link to the post because it’s protected by the membership rules. Viewing the post would require that I remove the rule, and I don’t want to do that.

Can you please assist?

#2

Hi @goalsarecool,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Can you please suggest a way to fix this without having to provide URL?

#4

Hi,

I’m sorry but we need to see it and inspect the code to be able to provide a solution.

Can you provide us a member login in Secure Note so we can check.

Thanks

#5

Here is the link. It’s towards the bottom.

http://goalsarecool.staging.wpengine.com/forums/topic/what-are-your-top-3-goals-in-2017/

#6

Hi there,

Please add this code in the custom CSS:

.bbp-body>ul, .bbp-body>div.hentry {
        word-break: break-all;
}

Hope this helps.

#7

That seems to have fixed the issue in the forums. However, it does not fix the same issue (on mobile) I’m having on pages such as: https://goalsarecool.com/growing/

#8

Hi,

Please add this code as well

@media (max-width: 767px) {
.x-main {   
    word-break: break-all;
}
}

Thanks

#9

That did not work. It splits words putting half of the word on one line and the other half on the other line. How do I fix this?

Is this happening because Themeco does not have responsive text?

#10

Hi again,

This has nothing to do with responsive text, but this happens due to the long words and URL’s. In your case you have long URL’s. To handle this situation you can add the following code in your Customizer:

p {
    overflow: hidden;
    text-overflow: ellipsis;
}

Also see https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ for more techniques.

Cheers!