1. 首頁
  2. 問答
  3. 基於JavaScript中沒有HTML元素的像素寬度截斷文本

基於JavaScript中沒有HTML元素的像素寬度截斷文本

2013-07-15 31 views
0

我們有一個與Rhino JavaScript引擎集成的系統。 我們可以上傳JavaScript文件來處理特定的一組數據。基於JavaScript中沒有HTML元素的像素寬度截斷文本

我需要根據像素寬度截斷一個字符串，以避免它擴大一個有限大小的框。 但是由於長度取決於字符，所以不可能對字符長度進行硬編碼。

如果這是一個基於瀏覽器的普通HTML應用程序，我可以使用SPAN或DIV寬度的幫助來編寫一個函數。但在我的情況下，我不能使用任何HTML元素。所以我打算通過保持每個字符的像素寬度數組來寫一個函數。 （在我的情況下，我只需要Arial Normal 10px）。

但我找不到資源來獲取Arial的像素寬度。 任何人都可以分享一個很好的鏈接？

如果你知道一個更好或簡單的解決方案，請讓我知道。

來源

2013-07-15 Tharaka Deshan

回答

0

找到了解決辦法:-) 我以編程方式編寫了寬度數組。

在C＃我用MeasureString()方法

Font stringFont = new Font("Arial", 10); 
     String s=""; 
     for (int i = 1; i < 256; i++) { 
      Char c = (char)i; 
      s = s + "widths[" + i + "]=" + CreateGraphics().MeasureString(c.ToString(), stringFont).Width.ToString() + ";\n"; 
     } 
     MessageBox.Show(s);

它產生我該陣列中，這是我在我的JavaScript使用。

var widths = new Array(); 
widths[1]=19.54427; 
widths[2]=4.440104; 
widths[3]=4.440104; 
widths[4]=4.440104; 
widths[5]=4.440104; 
widths[6]=4.440104; 
widths[7]=4.440104; 
widths[8]=4.440104; 
widths[9]=57.77343; 
widths[10]=4.440104; 
widths[11]=4.440104; 
widths[12]=4.440104; 
widths[13]=4.440104; 
widths[14]=4.440104; 
widths[15]=4.440104; 
widths[16]=4.440104; 
widths[17]=4.440104; 
widths[18]=4.440104; 
widths[19]=4.440104; 
widths[20]=4.440104; 
widths[21]=4.440104; 
widths[22]=4.440104; 
widths[23]=4.440104; 
widths[24]=4.440104; 
widths[25]=4.440104; 
widths[26]=4.440104; 
widths[27]=4.440104; 
widths[28]=4.440104; 
widths[29]=4.440104; 
widths[30]=4.440104; 
widths[31]=4.440104; 
widths[32]=4.444443; 
widths[33]=8.259547; 
widths[34]=9.320745; 
widths[35]=12.08116; 
widths[36]=12.08116; 
widths[37]=16.65798; 
widths[38]=13.6046; 
widths[39]=7.068141; 
widths[40]=9.014755; 
widths[41]=9.014755; 
widths[42]=9.789495; 
widths[43]=12.46528; 
widths[44]=8.259547; 
widths[45]=9.014755; 
widths[46]=8.259547; 
widths[47]=8.259547; 
widths[48]=12.08116; 
widths[49]=12.08116; 
widths[50]=12.08116; 
widths[51]=12.08116; 
widths[52]=12.08116; 
widths[53]=12.08116; 
widths[54]=12.08116; 
widths[55]=12.08116; 
widths[56]=12.08116; 
widths[57]=12.08116; 
widths[58]=8.259547; 
widths[59]=8.259547; 
widths[60]=12.46528; 
widths[61]=12.46528; 
widths[62]=12.46528; 
widths[63]=12.08116; 
widths[64]=18.38324; 
widths[65]=13.6046; 
widths[66]=13.6046; 
widths[67]=14.35981; 
widths[68]=14.35981; 
widths[69]=13.6046; 
widths[70]=12.83637; 
widths[71]=15.12804; 
widths[72]=14.35981; 
widths[73]=8.259547; 
widths[74]=11.31293; 
widths[75]=13.6046; 
widths[76]=12.08116; 
widths[77]=15.88324; 
widths[78]=14.35981; 
widths[79]=15.12804; 
widths[80]=13.6046; 
widths[81]=15.12804; 
widths[82]=14.35981; 
widths[83]=13.6046; 
widths[84]=12.83637; 
widths[85]=14.35981; 
widths[86]=13.6046; 
widths[87]=17.40668; 
widths[88]=13.6046; 
widths[89]=13.6046; 
widths[90]=12.83637; 
widths[91]=8.259547; 
widths[92]=8.259547; 
widths[93]=8.259547; 
widths[94]=10.88976; 
widths[95]=12.08116; 
widths[96]=9.014755; 
widths[97]=12.08116; 
widths[98]=12.08116; 
widths[99]=11.31293; 
widths[100]=12.08116; 
widths[101]=12.08116; 
widths[102]=8.259547; 
widths[103]=12.08116; 
widths[104]=12.08116; 
widths[105]=7.497828; 
widths[106]=7.497828; 
widths[107]=11.31293; 
widths[108]=7.497828; 
widths[109]=15.88324; 
widths[110]=12.08116; 
widths[111]=12.08116; 
widths[112]=12.08116; 
widths[113]=12.08116; 
widths[114]=9.014755; 
widths[115]=11.31293; 
widths[116]=8.259547; 
widths[117]=12.08116; 
widths[118]=11.31293; 
widths[119]=14.35981; 
widths[120]=11.31293; 
widths[121]=11.31293; 
widths[122]=11.31293; 
widths[123]=9.034286; 
widths[124]=8.012151; 
widths[125]=9.034286; 
widths[126]=12.46528; 
widths[127]=4.440104; 
widths[128]=4.440104; 
widths[129]=4.440104; 
widths[130]=11.99219; 
widths[131]=11.99219; 
widths[132]=4.440104; 
widths[133]=4.440104; 
widths[134]=11.99219; 
widths[135]=11.99219; 
widths[136]=9.941405; 
widths[137]=16.25651; 
widths[138]=11.74479; 
widths[139]=11.99219; 
widths[140]=19.51823; 
widths[141]=4.440104; 
widths[142]=4.440104; 
widths[143]=4.440104; 
widths[144]=4.440104; 
widths[145]=7.467447; 
widths[146]=7.467447; 
widths[147]=10.78125; 
widths[148]=10.78125; 
widths[149]=4.440104; 
widths[150]=12.46745; 
widths[151]=19.45963; 
widths[152]=9.54427; 
widths[153]=18.49609; 
widths[154]=9.941405; 
widths[155]=8.216145; 
widths[156]=12.83203; 
widths[157]=4.440104; 
widths[158]=4.440104; 
widths[159]=15; 
widths[160]=4.444443; 
widths[161]=9.014755; 
widths[162]=12.08116; 
widths[163]=12.08116; 
widths[164]=12.08116; 
widths[165]=12.08116; 
widths[166]=8.012151; 
widths[167]=12.08116; 
widths[168]=9.014755; 
widths[169]=14.56163; 
widths[170]=9.529078; 
widths[171]=12.08116; 
widths[172]=12.46528; 
widths[173]=4.440104; 
widths[174]=14.56163; 
widths[175]=12.02908; 
widths[176]=9.939235; 
widths[177]=11.98351; 
widths[178]=9.014755; 
widths[179]=9.014755; 
widths[180]=9.014755; 
widths[181]=12.3546; 
widths[182]=11.82074; 
widths[183]=9.014755; 
widths[184]=9.014755; 
widths[185]=9.014755; 
widths[186]=9.457463; 
widths[187]=12.08116; 
widths[188]=15.89627; 
widths[189]=15.89627; 
widths[190]=15.89627; 
widths[191]=12.83637; 
widths[192]=13.6046; 
widths[193]=13.6046; 
widths[194]=13.6046; 
widths[195]=13.6046; 
widths[196]=13.6046; 
widths[197]=13.6046; 
widths[198]=18.17491; 
widths[199]=14.35981; 
widths[200]=13.6046; 
widths[201]=13.6046; 
widths[202]=13.6046; 
widths[203]=13.6046; 
widths[204]=8.259547; 
widths[205]=8.259547; 
widths[206]=8.259547; 
widths[207]=8.259547; 
widths[208]=14.35981; 
widths[209]=14.35981; 
widths[210]=15.12804; 
widths[211]=15.12804; 
widths[212]=15.12804; 
widths[213]=15.12804; 
widths[214]=15.12804; 
widths[215]=12.46528; 
widths[216]=15.12804; 
widths[217]=14.35981; 
widths[218]=14.35981; 
widths[219]=14.35981; 
widths[220]=14.35981; 
widths[221]=13.6046; 
widths[222]=13.6046; 
widths[223]=12.83637; 
widths[224]=12.08116; 
widths[225]=12.08116; 
widths[226]=12.08116; 
widths[227]=12.08116; 
widths[228]=12.08116; 
widths[229]=12.08116; 
widths[230]=16.65798; 
widths[231]=11.31293; 
widths[232]=12.08116; 
widths[233]=12.08116; 
widths[234]=12.08116; 
widths[235]=12.08116; 
widths[236]=8.259547; 
widths[237]=8.259547; 
widths[238]=8.259547; 
widths[239]=8.259547; 
widths[240]=12.08116; 
widths[241]=12.08116; 
widths[242]=12.08116; 
widths[243]=12.08116; 
widths[244]=12.08116; 
widths[245]=12.08116; 
widths[246]=12.08116; 
widths[247]=11.98351; 
widths[248]=12.83637; 
widths[249]=12.08116; 
widths[250]=12.08116; 
widths[251]=12.08116; 
widths[252]=12.08116; 
widths[253]=11.31293; 
widths[254]=12.08116; 
widths[255]=11.31293;

終於這是我的JavaScript函數。

function smartTruncate(str,maxLen){ 
var widths = new Array(); 
widths[1]=19.54427; 
//Assigning all above values 

var len = 0; 
for (i =0; i < str.length ; i++){ 
var ascii = str.charCodeAt(i); 
    len = len + widths[ascii]; 
    if (len>maxLen) { 
     if(i==0) { 
      i=1; 
     } 
     str = str.substring(0, i-1); 
     break; 
    } 
} 
    return str; 
}

來源

2013-07-15 11:42:52

相關問題

 相關問題