Define global word-break rule with css

Question

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! :-)

Answer 1

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.