时间戳

首页 > 解决方案 > 用 css 定义全局断词规则

html - 用 css 定义全局断词规则

问题描述

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

这是我的代码的codepen

我已经尝试过这些：

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

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

非常感谢您！:-)

标签： htmlcssline-breaksword-break

解决方案

因此，当您希望您的网站与 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

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

推荐阅读