自动调整字体高度和宽度答案

【问题标题】：Autofit font height and width自动调整字体高度和宽度
【发布时间】：2013-09-05 17:56:28
【问题描述】：

我有一个 div，里面有几个 p 标签。

<div id="myDiv">
    <p>abcdefgh ijkl mnop</p>
    <p>qrst uvwxyz</p>
</div>

还有 CSS

div#myDiv{
    display: inline-block;
}

div#myDiv p{
    padding: 0;
    height: 100px;
    min-width: 250px;
    line-height: 100px;
    background: Green;
    font-size: 5em;
}

这是FIDDLE

在小提琴中，我手动将 font-size 设置为 5em，这会将 p 标签内的文本扩展到段落的整个高度。我想要的是设置它，使其根据 p 标签的高度和宽度进行扩展和收缩，并自行调整以覆盖整个高度。我试过 % font-size 但这不起作用（本质上是 em，对吧？）。也尝试过像素，但这又会被修复而不是流畅。

程序员和设计师有什么想法吗？

【问题讨论】：

您希望文本与包装元素的高度相同，还是适合宽度？根据高度设置它意味着它可能会包裹（因此无论如何都会比包裹器大）。
见here和here
@robooneus 基本上是先适应宽度，然后根据该宽度展开到最大高度。
看看这个插件，然后... fittextjs.com 它似乎可以满足您的需求。
@robooneus 感谢您的评论。但我正在寻找一个 js 免费的解决方案。加上在插件的主页上，它说“哦，你不敢让我们在段落文本上使用 FitText 来捕捉你。这仅用于巨大的显示文本！”。 :)

标签： html css web

【解决方案1】：

您可以更改字体大小以适应某些视口，但它不会完全符合您的要求。

div#myDiv p{
  font-size: 5em;
}

@media(max-width: 767px){
  //if the width of the screen is lower than 767px
  div#myDiv p{
    font-size: 4em;
  }
}

@media(max-width: 500px){
  div#myDiv p{
    font-size: 3em;
  }
}

@media(max-width: 400px){
  div#myDiv p{
    font-size: 2em;
  }
}

【讨论】：

感谢您的回答，但不是我想要的。