首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用css定义全局分词规则

用css定义全局分词规则
EN

Stack Overflow用户
提问于 2020-07-28 06:13:24
回答 1查看 322关注 0票数 0

目前,我的标题元素中的换行出现了问题。标题不应该包含在图片中,但我也不希望它没有连字符。我不想让复制编辑用html来破坏文字。我希望有一个用css构建的整体解决方案。

下面是我代码的代码库

我已经试过了

代码语言:javascript
运行
复制
line-break: anywhere;
line-break: normal;
line-break: loose;
line-break: strict;

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

提前谢谢你!:-)

EN

回答 1

Stack Overflow用户

发布于 2020-07-28 06:45:18

因此,可悲的是,当您希望您的站点与Chrome浏览器一起使用时,无法实现CSS自动分号,因此我建议使用视图来更改字体大小或使字体大小具有一定的响应性。

使用响应字体大小的简单解决方案(在我看来,这是一个有点奇怪的解决方案,但它确实使文本保持相同的格式):

HTML:

代码语言:javascript
运行
复制
<!--Set the breakpoint in html--> 
    <h1>
        <span class="line">You are</span> 
        <span class="line">remembered</span>
    </h1>

CSS:

代码语言:javascript
运行
复制
 /*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解决方案,只需检查一个基本教程,以便进行响应性设计,如

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63128065

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档