用css定义全局分词规则

Question

我当前在头元素中遇到换行问题。标题不应该包装到图像中，但我也不希望它包装时没有连字符。我不希望复制编辑器用html来打断单词。我想要一个用css构建的整体解决方案。

这是我的代码的代码笔

我已经试过了：

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 这样的响应式设计的基本教程

在那里，您可以根据屏幕大小定义行为。