Question

我有一个div标签wrapper 可调节尺寸。

<div class="wrapper">
   <p class="inside-text">Some text</p>
</div>

在此设置中，如何将inside-text的 font-size 设置为尽可能大，以便使用CSS适合一行（拟合）？

Answer 1

我担心（AFAIK）你只能使用CSS来实现这一点。

用于调整font-size以在响应式设计中实现令人满意的文本布局的常见CSS技术是媒体查询。只需等到文本以特定宽度中断，然后添加另一个媒体查询。好玩！

示例：

@media only screen and (max-width: 330px) {
    .inside-text { font-size: 1.1em; }
}
@media only screen and (max-width: 660px) {
    .inside-text { font-size: 1.3em; }
}
@media only screen and (max-width: 990px) {
    .inside-text { font-size: 1.5em; }
}

就像上面评论中提到的Pangloss一样，咬住子弹并使用fittext.js这样的javascript库是另一种选择。

Answer 2

正在播放：如果您事先知道文字的长度（例如＆＃34;某些文字＆＃34; = 9），您可以尝试这种棘手但纯粹的CSS解决方案（在Chrome / Firefox上测试），尝试调整输出框的大小）

http://codepen.io/anon/pen/rVvWEW

<强> HTML

<p>Some text</p>

<强> CSS

p {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-family: monospace;
  font-size: calc(100vw / .625 / 9);
}

如何确定最大可能的字体大小，使其适合CSS中的一行

2 个答案: