元素宽度随文字渐变

Appe Plan - Transition

说实话,我简直不敢相信,
这样一个简单而常用的效果,目前竟然无法用纯 效果实现。
包裹元素的容器宽度随着其中文字的变化,而逐渐改变宽度。

1、div 宽度随文字渐变。
实现原理:外层 div 套内层 span(或者 display:inline;),
外层设好 transition:width 0.5s ease-in-out;overflow:hidden;
内层文字变化后,将内层的宽度通过 js 赋值给外层。

$('.outer').css('width', $('.inner').width());

0


2、input 宽度随文字渐变。
实现原理:js 计算输入字符串长度乘以字体大小,并赋值宽度给 input

$('input').css('width', $('input').val().length * 24 + 10);

0


(英文字符高宽比不定,精确值需要写到 span 中去测量宽度。)

【相关资料】
1、Appe Plan – Transition◃flickr
2、The Ultimate Guide to Readable Web Typography◃pearsonified
3、Calculate text width with Javascript◃stackoverflow

发表评论

邮箱地址不会被公开。 必填项已用*标注