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?
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.
-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:
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.
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.
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.
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
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
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?
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.
