Hello!
I’ve got some long text strings (no spaces in between) in my design and I’m wondering how to deal with these when it comes to responsive sizing?
I’m assuming some custom code would be needed.
Any help is appreciated!
Here’s what I’m dealing with:
That looks like a link. If it’s a link, why not just make a text link or button and add the text into the hyperlink instead of adding it into the page itself?
It’s not a link, just a long text string. If I put the text string into a link block, will it automatically shrink?
haha what? Why would you want that long string of text on your website? It makes absolutely no sense. Is this a joke? I agree with @DFink. Just put it in a text link. Nobody is going to want to see that long string of gibberish on your website man.
@Chance_Percival, the long string of text is a key code generated automatically for a cryptocurrency – a bit like a password.
I see. Then yes, if you have it generate into a text block it should wrap. You may need to research CSS parameters to force a wrap if it doesn’t work.
Setup:
Create a DIV. Give it a style “test”. and a width of 500px;
Add a paragraph inside the DIV. Drop your longtext into the paragraph.
This will create the HTML code
<div class="test"></div>
and CSS code.
.test {
width: 500px;
}
Side Note:
At first, I thought the fix was to add a custom attribute to a DIV.
name "word-wrap"
value "break-word"
This didn’t work because WebFlow doesn’t create an inline style.
it creates this
<div class="test" word-wrap="break-word">
instead of this
<div class="test" style="word-break:break-word;">
So there are 2 Fixes.
1) The preferred route keeps the fix inside WebFlow
and will work with WebFlow Hosting or External Hosting.
Add an HTML Embed. Use JSQ to modify the DIV and dynamically add the style to the DIV.
“
style: word-wrap:break-word;”
Resulting in: <div class="test" style="word-break:break-word;">
2) The non-preferred route - it will only work on External Hosting.
Modify the [project].webflow.css`.
Based on the above setup… locate the style in the project css file
.test {
width: 500px;
}
and manually add this:
word-break:break-word;
which will result in this style:
.test {
width: 500px;
word-break:break-word;
}
Thanks, that’s an incredible answer! I’ll try it out! 
I tried route 1 but was unable to make this work. I did the following:
1.) Created a div and named it. Gave it a width of 500px.
2.) Dropped in a paragraph with the string of text as required
3.) Gave the div a custom attribute name of word-break and value of break-word
4.) Added this custom code to section:
5.) Published site to test.
It didn’t work. Any ideas what I did incorrectly? I can PM you the project link if you’d like.
Thanks!
You cannot assign an custom attribute to this.
If you do… it will generate this code
<div class="test" word-wrap="break-word">
which does not work. The correct code is
<div class="test" style="word-wrap:break-word;">
To do this… you have to use JSQ to dynamically add the property to the class.
So if you export the code… it will look like this:
<div class="test">
but at run-time… JSQ will modify it to this (add a style)
<div class="test" style="word-wrap:break-word;">
In JSQ… I think the proper term is Attribute… Adding / Removing an Attribute using the the addClass method.
I don’t know your code experience… so this may be a difficult transition for you to take.
Ah I see. I have no JSQ experience so indeed it would be a difficult solution. If anyone with the appropriate experience can help, I’d love to hear from you.
Thanks!
The best resources here for JSQ would probably be @bartekkustra or @PixelGeek.
I’m sure there are more. I think DFink knows JSQ also.
Why so complicated?
Simply add the css-option which is missing in webflow to your custom code:
<style>
.break-word {
word-wrap: break-word;
}
</style>
…and then add the class break-word to your desired div/whatever.
No need for Javascript. 
hmm… let me try that.
pchalk - send me your link
EDIT: @Tom… brilliant 
It works.
EDIT 2: @PChalk1… here’s a video to see it in action.
Thanks guys. This worked perfectly for me!
@Tom and @Revolution, you’re both great!