为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

白板的微信 2019-10-18 13:54:47
我有带的背景图片div。我想写一些文本,但是此文本应通过更改字体大小div。
查看完整描述

3 回答

?
LEATH

TA贡献1936条经验 获得超6个赞

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

});

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


查看完整回答
反对 回复 2019-10-18
?
交互式爱情

TA贡献1712条经验 获得超3个赞

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


客户端

当您想按需在客户端上执行此操作时,您将必须运行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。


服务器端

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


查看完整回答
反对 回复 2019-10-18
  • 3 回答
  • 0 关注
  • 566 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信