文字截断

文字截断分两种, 

第一种是静态截断, 确定一个宽度, 然后对于加载上的文字截断(如果文字过长),这种方法是:

<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div>

这里必须确定宽度的值.也可以使用input来变相,实现,可以不不确定宽度,其实已经算是动态截断了.

<input type=”text” style=”width:100%; cursor:default; border-width:0; border-style:none; background-color:transparent;” value=”任意长度的字符串” readonly/>

第二种是动态截断, 我遇到过一个问题, 界面可大可小, 希望字体可以自动截断,而不会造成字体容器的变形(比如一行变两行).其实这中方法出奇的简单,只要设置white-space: nowrap;即可! 这样字体就可以自动截断.

注: 写过一个table,当一个td缩小宽度时,遇到内容(一个包含文字的div),就会无法继续缩小,而是最多缩小到div的宽度.

这时候需要使table具有这样一个style: table-layout:fixed; 然后div就可以被强制缩小,里面的文字也会发生变化( 高度变长,或者像前面说的那样,添加nowrap,自动截取)