Fix text when changing language with localize.js

Community resources Product feedback
1

Hello there,

I have started using localize.js which is great. I do however have a problem when my text translate over to Swedish. (it can of course be any language). When translation is done, words might be longer and on smaller devices, this causes the text to appear “outside” and make the page able to scroll further on the right.

Anyone that knows if i can work around this or is this sowmthing Webflow can change so longer words will automatically use this sign ( - ) to make words act properly.

I hope i explained this enough.

Cheers :smiley:

2

Hey @Daniel_Remes i’m gonna resurrect this post. Maybe @Brandon can help with this issue? Not sure if there’s a way to break apart the words to dashes.

1 Like
3

Hi @Daniel_Remes, I am not sure if this will work, but I was doing some checking out on the web…can you try pasting the below css into your HEAD section of your site and then save changes, publish and see if you still have the issue?

<style>

p {

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

}

</style>
1 Like
4

Hey @Daniel_Remes

The ideal solution is to structure the content container so that text automatically wraps to the next line (@cyberdave’s suggestion looks promising).

If that doesn’t work, you can trying adding a <br /> in the translation to force the line break.

-Brandon

5

hi @Brandon i got the code from @cyberdave and it worked fine!

thanks!

1 Like