Line-break text

freiwild · December 2022

Hi, I have a portfolio grid item. In some teasers the text is too long and runs out on the viewing area. How can I make it so that the text wraps?

Phil · December 2022

Hello,

Please, use the following CSS code:

.portfolio-item .hover-desc .entry-title{
   word-break: break-word;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

freiwild · December 2022

Thank you! But I miss the Hyphen in the Word Break.

Phil · December 2022

Sorry, but I do not understand.

Can you tell me what you refer to, please?

Thanks

freiwild · December 2022

I miss this Line here

Phil · December 2022

Replace the previous code with this one:

.portfolio-item .hover-desc .entry-title{
word-break: break-word;
hyphens: auto;
}

Thanks

freiwild · December 2022

Thank you. But this doesn't work.

Phil · December 2022

It displays for me.

Did you try clearing your browser cache?

Best regards

freiwild · December 2022

In Firefox it works. But not in Safari.

Phil · December 2022

Please, add "-webkit-hypens: auto;" to that CSS.

.portfolio-item .hover-desc .entry-title{
word-break: break-word;
hyphens: auto;
-webkit-hyphens: auto;
}

Thanks

freiwild · December 2022

Great, thank you!

Comments