Streaming live at 10am (PST)

Words in our language with H1 headline on the Iphones breakpoint is too long

I have a problem on the iphone breakpoint when I have long words. It is so that in our language, we often use long words. And that means when use H1 headline on the Iphones breakpoint, the word comes far beyond the 380 pixels for the iPhone (I have Iphone 7), and then the rest of the layout does not look good at the bottom because of this word. What can I do? Isn’t it possible to “force the word” to be on 2 lines with a hyphen in the 1st line? (And sometimes 3 lines in the H1, so the would be great to do a hyphen in the 1st line and 2nd line?) I have to use H1 for a heading and it fills a lot for some words in our language. Is there a code I can put on the website so that the word can be broken in 2 lines with a hyphen and go to the next line on the Iphone breakpoint?

Her is the sharelink

And look at the Iphone breakpoint in this post

Thank you so much for helping me :smiling_face_with_three_hearts: :heart_eyes:

Wow, that’s a very long word :open_mouth:

I don’t know if you’ll be able to get it hyphenated, but you can force it to break if necessary within the word by adding the following custom code:

<style>
  .YOUR-CLASS {
    word-break: break-all;
  }
</style>

There is a hyphen CSS rule (hyphens: none | manual | auto) but it doesn’t seem to work in all browsers.

Hopefully that helps :v:

Thanks a lot!
Shall I put it on the CMS collection page? on the Body tag?

I can remember I had a very long link, and that also break the Iphone breakpoint, and I got this code which help that probelm:
.parent-element-class p, a { overflow-wrap: break-word; word-wrap: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }

Is there a similiar for long words??
I have put the code you sent me on the collection page, but it doesn’t work??

That code you provided will work more consistently across browsers that support hyphens, so I’d use that instead.

In terms of getting the code to work, you’ll need to swap out the .YOUR-CLASS text for the class of the element you want to break and include it in the head of either the page with the issue or on the project (to have it work site wide). Keep in mind that the change will only show on the live site unless you include the code within an HTML embed element on the page in the Designer.

Thank you @mikeyevin !! But I don’t understand what you mean with this:


I have a live site, which I have to use it. But I ony try first with a trialsite with webflow

Hey @neanea6060,

just change ‘.YOUR-CLASS’ to ‘h1’ or any other classes you want to force the word breaks in. Looks great :slight_smile:

Thank you @robingranqvist
So this code:

<style>
  H1 {
    word-break: break-all;
  }
</style>

@neanea6060 Yes, just change it to lowercase ‘h1’ and that should work fine (not sure if it matters) :slight_smile:

h1 { word-break: break-all; }

Thank you @robingranqvist

-but there must also be a hyphen from the first line down to the second line. One cannot just cut the word without a hyphen.

I had a similar problem once that a web link was too long and it disturbed all the iphone breakpoint.
I got this code and it helped and there was a hyphen in the first line:

.parent-element-class p, a {overflow-wrap: break-word; word-wrap: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }

But I don’t know where I can put this hyphen on this in this code regarding the long words?

h1 { word-break: break-all; }

but there must also be a hyphen from the first line down to the second line. One cannot just cut the word without a hyphen.

Unfortunately the CSS style for hyphens is not supported by all browsers and current support is even worse for non-English languages. This means that while the code you included (shown below) would work for certain specific situations, Chrome users for example (which is nearly 66% of web traffic) won’t see them.

h1 { 
  overflow-wrap: break-word; 
  word-wrap: break-word; 
  -ms-hyphens: auto; 
  -moz-hyphens: auto; 
  -webkit-hyphens: auto; 
  hyphens: auto; 
}

If you want something a bit more reliable, I’d check out something like Hyphenator.js which claims to have support for many languages. In this case, CSS alone probably won’t cut it.

But I don’t know where I can put this hyphen on this in this code regarding the long words?

The code I posted above is about as good as it gets in terms of simple CSS styling (keeping in mind that it will only apply to H1 tags as it’s currently written), otherwise you’d probably need a JS library like Hyphenator.

Hi

here is what you need to do to insert hyphenation inside your big words:

Inside this file, you will find two brackets - between them there is an invisible symbol. You could copy and paste this whole thing with brackets in the middle of your long stubborn words (after pasting everything just delete brackets around the invisible hyphen with backspace and del buttons - be careful not to delete the invisible item itself, put your cursor just after the last bracket, then press “backspace”, then press “left arrow” two times and press “del” key. It will look like there is nothing inside the big word but actually the invisible symbol will stay there and will produce a hyphen while breaking your word)

You could paste this symbol in the titles of your collection items - this will work.

1 Like

See the “live” site, where I have use your code.
He hyphen is wrong, - it should be between the two “ss” (see printscreen)
So what do I do then
See on the phone link

Ups! Sorry @dram I don’t understand what you mean?
But as I posted above, - the hyphen is on wrong place.

Hi again @dram I also posted a new post below :slight_smile:

I also saw, that in line 3, the “ni” is part of the first word “Sunnudagsskúlabørnini”
So I think , if the hyphen was between the “ss” it would have been only one hyphen and 2 lines to this word

Delete that custom code. If you are using manual hyphen solution I provided you don’t need it.

Copy everything inside the text file I sent and insert it into the place you want your hyphen to be in your word. Delete brackets.

Inside the textfile?? Sorry I don’t understand?
So, if my client has to write posts on his CMS, and word which has long words, then I have to add a custom code on the CMS template. Or where else shall I put the code?

  • it can’t be on the text on the CMS editor?

You don’t need any custom code.

Copy everything from the text file I sent. Paste inside any word anywhere (even when adding post title). Delete brackets. This word will then be hyphenated when necessary.

This one:

And shall I give this to my clien, when we do a post, where a word is very long? (and it is ony regarding the breakpoint for the Phone the problem is)

Woah, is that how it looks to you? It doesn’t look like anything to me. If you paste this symbol into a word - will you still see this symbol?

edit: I mean if you see words that will look like th≠is, then probably it won’t work for you.