视觉长度截断参数（顺带测量代码） _Web前端

视觉长度截断参数（附带测量代码）
先问一个问题，现在cpu浮点数的计算并不比整数慢？是吗？
――――――――――――――――――
linux下我用python+jquery测试出了字符串宽度的参数
明天到win下测试
附带测试源代码

___________________________
python对ascii用ord(i)-32

visable_width=0.5333333333333333,0.8,1,1.6,1.6,2.6,2,0.6,1,1,1.2,1.8,0.8,1,0.8,0.8,1.6,1.6,1.6,1.6,1.6,1.6,1.6,1.6,1.6,1.6,0.8,0.8,1.8,1.8,1.8,1.6,3,2,2,2.2,2.2,2,1.8,2.2,2.2,0.8,1.4,2,1.6,2.4,2.2,2.2,2,2.2,2.2,2,1.8,2.2,2,2.8,2,2,1.8,0.8,0.8,0.8,1.4,1.6,1,1.6,1.6,1.4,1.6,1.6,0.8,1.6,1.6,0.6,0.6,1.4,0.6,2.4,1.6,1.6,1.6,1.6,1,1.4,0.8,1.6,1.4,2.2,1.4,1.4,1.4,1,0.8,1,1.8

测试基准一 : 1
unichr(32) =>   : 0.5333333333333333
unichr(33) => ! : 0.8
unichr(34) => " : 1
unichr(35) => # : 1.6
unichr(36) => $ : 1.6
unichr(37) => % : 2.6
unichr(38) => & : 2
unichr(39) => ' : 0.6
unichr(40) => ( : 1
unichr(41) => ) : 1
unichr(42) => * : 1.2
unichr(43) => + : 1.8
unichr(44) => , : 0.8
unichr(45) => - : 1
unichr(46) => . : 0.8
unichr(47) => / : 0.8
unichr(48) => 0 : 1.6
unichr(49) => 1 : 1.6
unichr(50) => 2 : 1.6
unichr(51) => 3 : 1.6
unichr(52) => 4 : 1.6
unichr(53) => 5 : 1.6
unichr(54) => 6 : 1.6
unichr(55) => 7 : 1.6
unichr(56) => 8 : 1.6
unichr(57) => 9 : 1.6
unichr(58) => : : 0.8
unichr(59) => ; : 0.8
unichr(60) => < : 1.8
unichr(61) => = : 1.8
unichr(62) => > : 1.8
unichr(63) => ? : 1.6
unichr(64) => @ : 3
unichr(65) => A : 2
unichr(66) => B : 2
unichr(67) => C : 2.2
unichr(68) => D : 2.2
unichr(69) => E : 2
unichr(70) => F : 1.8
unichr(71) => G : 2.2
unichr(72) => H : 2.2
unichr(73) => I : 0.8
unichr(74) => J : 1.4
unichr(75) => K : 2
unichr(76) => L : 1.6
unichr(77) => M : 2.4
unichr(78) => N : 2.2
unichr(79) => O : 2.2
unichr(80) => P : 2
unichr(81) => Q : 2.2
unichr(82) => R : 2.2
unichr(83) => S : 2
unichr(84) => T : 1.8
unichr(85) => U : 2.2
unichr(86) => V : 2
unichr(87) => W : 2.8
unichr(88) => X : 2
unichr(89) => Y : 2
unichr(90) => Z : 1.8
unichr(91) => [ : 0.8
unichr(92) => \ : 0.8
unichr(93) => ] : 0.8
unichr(94) => ^ : 1.4
unichr(95) => _ : 1.6
unichr(96) => ` : 1
unichr(97) => a : 1.6
unichr(98) => b : 1.6
unichr(99) => c : 1.4
unichr(100) => d : 1.6
unichr(101) => e : 1.6
unichr(102) => f : 0.8
unichr(103) => g : 1.6
unichr(104) => h : 1.6
unichr(105) => i : 0.6
unichr(106) => j : 0.6
unichr(107) => k : 1.4
unichr(108) => l : 0.6
unichr(109) => m : 2.4
unichr(110) => n : 1.6
unichr(111) => o : 1.6
unichr(112) => p : 1.6
unichr(113) => q : 1.6
unichr(114) => r : 1
unichr(115) => s : 1.4
unichr(116) => t : 0.8
unichr(117) => u : 1.6
unichr(118) => v : 1.4
unichr(119) => w : 2.2
unichr(120) => x : 1.4
unichr(121) => y : 1.4
unichr(122) => z : 1.4
unichr(123) => { : 1
unichr(124) => | : 0.8
unichr(125) => } : 1
unichr(126) => ~ : 1.8
一二三四五六七八九十
165px

88px
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
132px
""""""""""""""""""""""""""""""
165px
##############################
264px
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
264px
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
429px
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
330px
''''''''''''''''''''''''''''''
99px
((((((((((((((((((((((((((((((
165px
))))))))))))))))))))))))))))))
165px
******************************
198px
++++++++++++++++++++++++++++++
297px
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
132px
------------------------------
165px
..............................
132px
//////////////////////////////
132px
000000000000000000000000000000
264px
111111111111111111111111111111
264px
222222222222222222222222222222
264px
333333333333333333333333333333
264px
444444444444444444444444444444
264px
555555555555555555555555555555
264px
666666666666666666666666666666
264px
777777777777777777777777777777
264px
888888888888888888888888888888
264px
999999999999999999999999999999
264px
::::::::::::::::::::::::::::::
132px
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
132px
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
297px
==============================
297px
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
297px
??????????????????????????????
264px
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
495px
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
330px
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
330px
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
363px
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
363px
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
330px
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
297px
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
363px
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
363px
IIIIIIIIIIIIIIIIIIIIIIIIIIIIII
132px
JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
231px
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
330px
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
264px
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
396px
NNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
363px
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
363px
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
330px
QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ
363px
RRRRRRRRRRRRRRRRRRRRRRRRRRRRRR
363px
SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
330px
TTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
297px
UUUUUUUUUUUUUUUUUUUUUUUUUUUUUU
363px
VVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
330px
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
462px
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
330px
YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
330px
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
297px
［［［［［［［［［［［［［［［
132px
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
132px
］］］］］］］］］］］］］］］
132px
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
231px
______________________________
264px
``````````````````````````````
165px
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
264px
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
264px
cccccccccccccccccccccccccccccc
231px
dddddddddddddddddddddddddddddd
264px
eeeeeeeeeeeeeeeeeeeeeeeeeeeeee
264px
ffffffffffffffffffffffffffffff
132px
gggggggggggggggggggggggggggggg
264px
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
264px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiii
99px
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
99px
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
231px
llllllllllllllllllllllllllllll
99px
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
396px
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
264px
oooooooooooooooooooooooooooooo
264px
pppppppppppppppppppppppppppppp
264px
qqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
264px
rrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
165px
ssssssssssssssssssssssssssssss
231px
tttttttttttttttttttttttttttttt
132px
uuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
264px
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
231px
wwwwwwwwwwwwwwwwwwwwwwwwwwwwww
363px
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
231px
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
231px
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
231px
{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{
165px
||||||||||||||||||||||||||||||
132px
}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
165px
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
297px
―――――――――――――――――
测试源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.char_width_wrapper{margin:.5em 1em;float:left;clear:left;}
.char_width{background:#f2f2f2;font-family:Arial,Helvetica,sans-serif;}
</style>
<script src="jquery_src.js"></script>
<script>
$(function(){
var buf=[],base_width,python=[];
$(".char_width").each(function(i){
var rev_width,width=this.offsetWidth;
$(this.parentNode).append("<div>"+width+"px</div>")
if(buf.length){
rev_width=width/base_width;
i="unichr("+(i+31)+") =>";
python.push(rev_width)
}
else{
i="测试基准"
rev_width=1;
base_width=width;
}
buf.push(i+" "+$(this).text().substring(0,1)+" : "+rev_width)
})
$("#result").html(buf.join("<br/>"))
$("#python").html("visable_width="+python.join(","))
})
</script>
</head><body>
<div>python对ascii用ord(i)-32</div>
<p id="python"></p>
<p id="result"></p>
<div class="char_width_wrapper"><div class="char_width">一二三四五六七八九十</div></div>
<div class="char_width_wrapper"><div class="char_width">                    </div></div>
<div class="char_width_wrapper"><div class="char_width">!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div></div>
<div class="char_width_wrapper"><div class="char_width">""""""""""""""""""""""""""""""</div></div>
<div class="char_width_wrapper"><div class="char_width">##############################</div></div>
<div class="char_width_wrapper"><div class="char_width">$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$</div></div>
<div class="char_width_wrapper"><div class="char_width">%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%</div></div>
<div class="char_width_wrapper"><div class="char_width">&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&</div></div>
<div class="char_width_wrapper"><div class="char_width">''''''''''''''''''''''''''''''</div></div>
<div class="char_width_wrapper"><div class="char_width">((((((((((((((((((((((((((((((</div></div>
<div class="char_width_wrapper"><div class="char_width">))))))))))))))))))))))))))))))</div></div>
<div class="char_width_wrapper"><div class="char_width">******************************</div></div>
<div class="char_width_wrapper"><div class="char_width">++++++++++++++++++++++++++++++</div></div>
<div class="char_width_wrapper"><div class="char_width">,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,</div></div>
<div class="char_width_wrapper"><div class="char_width">------------------------------</div></div>
<div class="char_width_wrapper"><div class="char_width">..............................</div></div>
<div class="char_width_wrapper"><div class="char_width">//////////////////////////////</div></div>
<div class="char_width_wrapper"><div class="char_width">000000000000000000000000000000</div></div>
<div class="char_width_wrapper"><div class="char_width">111111111111111111111111111111</div></div>
<div class="char_width_wrapper"><div class="char_width">222222222222222222222222222222</div></div>
<div class="char_width_wrapper"><div class="char_width">333333333333333333333333333333</div></div>
<div class="char_width_wrapper"><div class="char_width">444444444444444444444444444444</div></div>
<div class="char_width_wrapper"><div class="char_width">555555555555555555555555555555</div></div>
<div class="char_width_wrapper"><div class="char_width">666666666666666666666666666666</div></div>
<div class="char_width_wrapper"><div class="char_width">777777777777777777777777777777</div></div>
<div class="char_width_wrapper"><div class="char_width">888888888888888888888888888888</div></div>
<div class="char_width_wrapper"><div class="char_width">999999999999999999999999999999</div></div>
<div class="char_width_wrapper"><div class="char_width">::::::::::::::::::::::::::::::</div></div>
<div class="char_width_wrapper"><div class="char_width">;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;</div></div>
<div class="char_width_wrapper"><div class="char_width"><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</div></div>
<div class="char_width_wrapper"><div class="char_width">==============================</div></div>
<div class="char_width_wrapper"><div class="char_width">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></div></div>
<div class="char_width_wrapper"><div class="char_width">??????????????????????????????</div></div>
<div class="char_width_wrapper"><div class="char_width">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</div></div>
<div class="char_width_wrapper"><div class="char_width">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div></div>
<div class="char_width_wrapper"><div class="char_width">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div></div>
<div class="char_width_wrapper"><div class="char_width">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div></div>
<div class="char_width_wrapper"><div class="char_width">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div></div>
<div class="char_width_wrapper"><div class="char_width">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div></div>
<div class="char_width_wrapper"><div class="char_width">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div></div>
<div class="char_width_wrapper"><div class="char_width">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div></div>
<div class="char_width_wrapper"><div class="char_width">HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</div></div>
<div class="char_width_wrapper"><div class="char_width">IIIIIIIIIIIIIIIIIIIIIIIIIIIIII</div></div>
<div class="char_width_wrapper"><div class="char_width">JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</div></div>
<div class="char_width_wrapper"><div class="char_width">KKKKKKKKKKKKKKKKKKKKKKKKKKKKKK</div></div>
<div class="char_width_wrapper"><div class="char_width">LLLLLLLLLLLLLLLLLLLLLLLLLLLLLL</div></div>
<div class="char_width_wrapper"><div class="char_width">MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</div></div>
<div class="char_width_wrapper"><div class="char_width">NNNNNNNNNNNNNNNNNNNNNNNNNNNNNN</div></div>
<div class="char_width_wrapper"><div class="char_width">OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO</div></div>
<div class="char_width_wrapper"><div class="char_width">PPPPPPPPPPPPPPPPPPPPPPPPPPPPPP</div></div>
<div class="char_width_wrapper"><div class="char_width">QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ</div></div>
<div class="char_width_wrapper"><div class="char_width">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div></div>
<div class="char_width_wrapper"><div class="char_width">SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</div></div>
<div class="char_width_wrapper"><div class="char_width">TTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</div></div>
<div class="char_width_wrapper"><div class="char_width">UUUUUUUUUUUUUUUUUUUUUUUUUUUUUU</div></div>
<div class="char_width_wrapper"><div class="char_width">VVVVVVVVVVVVVVVVVVVVVVVVVVVVVV</div></div>
<div class="char_width_wrapper"><div class="char_width">WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</div></div>
<div class="char_width_wrapper"><div class="char_width">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div>
<div class="char_width_wrapper"><div class="char_width">YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</div></div>
<div class="char_width_wrapper"><div class="char_width">ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</div></div>
<div class="char_width_wrapper"><div class="char_width">［［［［［［［［［［［［［［［</div></div>
<div class="char_width_wrapper"><div class="char_width">\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\</div></div>
<div class="char_width_wrapper"><div class="char_width">］］］］］］］］］］］］］］］</div></div>
<div class="char_width_wrapper"><div class="char_width">^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^</div></div>
<div class="char_width_wrapper"><div class="char_width">______________________________</div></div>
<div class="char_width_wrapper"><div class="char_width">``````````````````````````````</div></div>
<div class="char_width_wrapper"><div class="char_width">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></div>
<div class="char_width_wrapper"><div class="char_width">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div></div>
<div class="char_width_wrapper"><div class="char_width">cccccccccccccccccccccccccccccc</div></div>
<div class="char_width_wrapper"><div class="char_width">dddddddddddddddddddddddddddddd</div></div>
<div class="char_width_wrapper"><div class="char_width">eeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div></div>
<div class="char_width_wrapper"><div class="char_width">ffffffffffffffffffffffffffffff</div></div>
<div class="char_width_wrapper"><div class="char_width">gggggggggggggggggggggggggggggg</div></div>
<div class="char_width_wrapper"><div class="char_width">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div></div>
<div class="char_width_wrapper"><div class="char_width">iiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div></div>
<div class="char_width_wrapper"><div class="char_width">jjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</div></div>
<div class="char_width_wrapper"><div class="char_width">kkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</div></div>
<div class="char_width_wrapper"><div class="char_width">llllllllllllllllllllllllllllll</div></div>
<div class="char_width_wrapper"><div class="char_width">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</div></div>
<div class="char_width_wrapper"><div class="char_width">nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</div></div>
<div class="char_width_wrapper"><div class="char_width">oooooooooooooooooooooooooooooo</div></div>
<div class="char_width_wrapper"><div class="char_width">pppppppppppppppppppppppppppppp</div></div>
<div class="char_width_wrapper"><div class="char_width">qqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</div></div>
<div class="char_width_wrapper"><div class="char_width">rrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</div></div>
<div class="char_width_wrapper"><div class="char_width">ssssssssssssssssssssssssssssss</div></div>
<div class="char_width_wrapper"><div class="char_width">tttttttttttttttttttttttttttttt</div></div>
<div class="char_width_wrapper"><div class="char_width">uuuuuuuuuuuuuuuuuuuuuuuuuuuuuu</div></div>
<div class="char_width_wrapper"><div class="char_width">vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</div></div>
<div class="char_width_wrapper"><div class="char_width">wwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></div>
<div class="char_width_wrapper"><div class="char_width">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div></div>
<div class="char_width_wrapper"><div class="char_width">yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div></div>
<div class="char_width_wrapper"><div class="char_width">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div></div>
<div class="char_width_wrapper"><div class="char_width">{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{</div></div>
<div class="char_width_wrapper"><div class="char_width">||||||||||||||||||||||||||||||</div></div>
<div class="char_width_wrapper"><div class="char_width">}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}</div></div>
<div class="char_width_wrapper"><div class="char_width">~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</div></div>

</body></html>
____________________________________________________
python截断函数－未完成
def utf8_cut(word,limit,etc="..."):
    """一个中文当2个E文"""
    cn=0
    en=0
    i=0
    length=len(word)
    if length<=limit:return word
    limit = limit<<1
    width=0
    while i<length:
        c=word[i]
        if c>"\xE0" and c<="\xEF":
            offset=3
            width+=2
        else:
            if c<"\xC0":
            offset=1
            width+=1
            else:
                width+=2
                if c<="\xDF":offset=2
                elif c<="\xF7":offset=4
                elif c<="\xFB":offset=5
                else:offset=6
        if width>limit:
            return word[:i]+etc
        else:
            i+=offset
    return word

1 楼 hax 2008-11-16

字体不同，当然结果就不同。
不同浏览器处理或许还会有差异。
IE上某些office扩展特性或许会引入额外的排版差异。

最保险的方法恐怕还是创建一个hidden的元素然后放入文本计算高宽。

2 楼 zuroc 2008-11-17

这个用于正文截断,字体可以改一改测量的html,差不过就可以.不必要太精确.

标题截断可以参考

无js实现text-overflow: ellipsis; 完美支持Firefox

http://zsp.iteye.com/blog/261175