Create word break for a long word (e.g. when viewed on mobile phone)

Support
#1

Dear Themeco Team,

I am currently having an issue when I look at my website (www.findyourvalues.de). At the bottom of the page there is the rather long word “Persönlichkeitstest” in the headline. If I look at my page with my mobile phone, this word is to long to be fully displayed and gets cut off. Is there a possibility to only force this word to be seperated when the screen gets smaller (e.g. on a mobile phone).

Cheers Bene

#2

Hi Bene,

Yes, we can use word wrap property to achieve that. Add break-word on the custom headline class field then add the following CSS.

.break-word {
    word-wrap: break-word;
}

The text is too large on smaller screen. You may check responsive text for it to adjust font size on different screen.

Hope this helps.

#3

Thank you Lely for your quick reply.

I entered like you have written the code into css. Additionally, I added break-word to the custom headline class field in that way: [x_custom_headline type=“left” level=“h7” looks_like=“h1” break-word]Mache den Persönlichkeitstest[/x_custom_headline] .

Unfortunately, it does not work. Did I do anything wrong in the custom headline class field?

Cheers

Bene

#4

Hey,

You can`t add this property inside the shortcode. To accomplish this, you need to add a custom class in the custom headline through this field: http://prntscr.com/ghc8ke -> you can add any name that you want.

After it, in the custom CSS place here: http://prntscr.com/ghc8ws -> add the custom code provided by Lely.

    word-wrap: break-word;
}```