如何截取字符串，使其在浏览器上显示相同长度？

如何实现如下功能？

乍一看是不是想到了直接通过substring截取，但是这样会面临一个问题：有的标题中有中文，有的标题中有字母数字，这样如果直接采用substring截取固定个数字符，浏览器上显示仍然会不整齐，这是因为浏览器上显示中文所占用的像素要多于字母和数字。采用此法截取后效果如下图：

如何解决问题呢？

通过正则表达式匹配字符串，得出真实长度，之后按照真实长度等比例进行截取：

（此在js中进行截取）

<script type="text/javascript">
var title="${v.title}";
var id="${v.id}";
var realLength=(title.replace(/[^\x00-\xff]/g,"**").length+1)/2
if(realLength>14){
title=title.substring(0, 14*(title.length/realLength))+"...";
}
$("#"+id).html(title);
       //alert(realLength);

</script>