如何自动更改div中的文本大小？

Question

我有带的背景图片div。我想写一些文本，但是此文本应通过更改字体大小div。

Answer 1

FlowType.js会做到这一点：调整字体大小以匹配边界元素，无论是div还是其他元素类型。

实现FlowType的示例：

设置你的风格

body {

font-size: 18px;

line-height: 26px;

}

从GitHub下载FlowType，并在您的head元素中包含对它的引用

flowtype.jQuery.js

通话流程类型

$('body').flowtype();

（可选）更新默认设置

$('body').flowtype({

minimum   : 500,

maximum   : 1200,

minFont   : 12,

maxFont   : 40,

fontRatio : 30,

lineRatio : 1.45

});

查看他们的主页以获取交互式演示

Answer 2

我不能完全确定我是否理解您的问题，但我认为您要问的是如何将文本放入预定义大小的特定容器中。我将尝试回答这个问题。

客户端

当您想按需在客户端上执行此操作时，您将必须运行Javascript。这个想法是：

生成不可见div并将其样式设置为：

position: absolute;

top: 0;

left: 0;

width: auto;

height: auto;

display: block;

visibility: hidden;

font-family: /* as per your original DIV */

font-size: /* as per your original DIV */

white-space: /* as per your original DIV */

复制您的文字

检查DIV的宽度是否超过原始DIV的大小。

调整font-size值的方法不只是增加/减少，而是通过计算不可见和原始DIV之间的宽度差。这将更快地纠正尺寸。

转到步骤3。

服务器端

没有在服务器上设置字体大小的可靠方法，因此它不适合您的客户端呈现的容器。不幸的是，您只能根据预先测试的经验数据估算尺寸。