0

i currently have a problem with line breaks in my header element. The headline shouldn't wrap into the image, but I also don't want it to wrap without a hyphen. I don't want the copy editors to make the word-breaks themselves with html. I would like to have an overall solution built with css.

Here is a codepen of my code

I already tried these:

line-break: anywhere;
line-break: normal;
line-break: loose;
line-break: strict;

word-break: break-all;
word-wrap: break-word;

Thank you so much in advance! :-)

Geshode
  • 3,600
  • 6
  • 18
  • 32
Codrey
  • 76
  • 6
  • 1
    https://stackoverflow.com/questions/42685806/css-break-word-with-hyphen This pretty much sums it up. automatic hyphenisation sadly doesn't work in Chrome – Warden330 Jul 28 '20 at 06:28

1 Answers1

0

so as there is sadly no way to implement the automatic CSS hyphenisation when you want your Site to be used with Chrome Browsers, i recommend using viewports to change the Font-Size or make the Font-Size somewhat responsive.

Easy solution with responsive Font-Size (it's a workaround that is a bit weird in my eyes but it does keep the Text in the same format):

HTML:

<!--Set the breakpoint in html--> 
    <h1>
        <span class="line">You are</span> 
        <span class="line">remembered</span>
    </h1>

CSS:

 /*add css for the intended break*/
.line{
    display: inline-block;
    margin-bottom: 0.3vw;
}
h1 {
    font-family: "Space Grotesk", sans-serif;
    color: $color-highlight;
    margin-bottom: 0;
   /*Set a responsive Font-Size*/
    font-size: 6vw;
    line-height: 80px;
}

For the viewport solution just check a basic tutorial for responsive design like THIS

There you can define the behavior depending on the screen size.

Warden330
  • 999
  • 1
  • 5
  • 11
  • the html Breakpoint is not really necessary, it's just for better looks. key point is the responsive font-size – Warden330 Jul 28 '20 at 07:16