目前,我的标题元素中的换行出现了问题。标题不应该包含在图片中,但我也不希望它没有连字符。我不想让复制编辑用html来破坏文字。我希望有一个用css构建的整体解决方案。
我已经试过了
line-break: anywhere;
line-break: normal;
line-break: loose;
line-break: strict;
word-break: break-all;
word-wrap: break-word;
提前谢谢你!:-)
发布于 2020-07-28 06:45:18
因此,可悲的是,当您希望您的站点与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;
}
对于viewport解决方案,只需检查一个基本教程,以便进行响应性设计,如这
在那里,您可以根据屏幕大小来定义行为。
https://stackoverflow.com/questions/63128065
复制相似问题