如何调整文本大小以适应容器?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (59)

这是我目前的方法,但问题是我需要添加10px才能使文本看起来不错。

HTML:

<div class="chapter-title"> text goes here </div>

调整大小时调用的JS函数:

    var chapterTitle = this.$('.chapter-title');
    var fontSize = chapterTitle.css("font-size");
    var charCount = chapterTitle.text().replace(/ /g,'').length;

    fontSize = (chapterTitle.width()/charCount) + 10;
    chapterTitle.css('font-size', fontSize)
提问于
用户回答回答于

另一种方法是使用vw而不是px或em。Vw基于视图宽度的大小,因此,例如,如果你使用移动设备,则文本将显得更大。

我建议使用基于媒体的文本大小调整以及vw。也许你可以将容器的大小设置为基于百分比的大小。

用户回答回答于

有没有可能不能通过CSS更改fontsize?

如果问题是针对小文本,我会在CSS中添加媒体查询来更改字体大小。

.chapter-title{
  font-size:18px;
}

@media screen and (max-width:768px){
  .chapter-title{
    font-size:24px;
  }
}

扫码关注云+社区

领取腾讯云代金券