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