用 css 定义全局断词规则

Question

我目前在我的标题元素中遇到换行问题。标题不应该换行到图像中，但我也不希望它在没有连字符的情况下换行。我不希望文案编辑自己用 html 断字。我想要一个用 css 构建的整体解决方案。

Here is a codepen of my code

这些我已经试过了：

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

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

提前非常感谢您！ :-)

Answer 1

所以当您希望您的网站与 Chrome 浏览器一起使用时，遗憾的是没有办法实现自动 CSS 连字符，我建议使用视口来更改字体大小或使字体大小有点响应。

使用响应式字体大小的简单解决方案（这是一种在我看来有点奇怪的解决方法，但它确实使文本保持相同的格式）：

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;
}

对于视口解决方案，只需查看响应式设计的基本教程，例如 THIS

您可以在此处根据屏幕大小定义行为。