js 或许JQUERY 让一行英文标题字数超出的话超出部分变成. _JavaScript

js 或者JQUERY 让一行英文标题字数超出的话超出部分变成....
最后的单词必须要完整
比如

I want this effect, not that one.

变成I want this effect,not ....
不是I want this effect,no....

自己JS这块不怎么行，没有写出来。有没有写过的，HELP ME

------解决方案--------------------
我的想法：用正则，抽取单词，抽取几个自己顶，抽取出来后根据总字符长度动态调整比如Div的宽度。
------解决方案--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title></title>
<style type="text/css">
td
{
font-size: 12px;
overflow: hidden;
padding-left: 5px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
table
{
table-layout: fixed;
}
</style>
</head>
<body>
<form method="post" action="a.aspx" id="form1">

<table width="300" cellspacing="0" cellpadding="0" border="1">
<tr>
<td style="width: 50px">孟子章0</td>
<td>学生姓名学生姓名学生姓名学生姓名学生姓名学生姓名学生姓名0</td>
<td style="width: 50px">孟子章0</td>
</tr>

<tr>
<td style="width: 50px">孟子章1</td>
<td>学生姓名学生姓名学生姓名学生姓名学生姓名学生姓名学生姓名1</td>
<td style="width: 50px">孟子章1</td>
</tr>
</table>
</form>
</body>
</html>
------解决方案--------------------
css 实现。。

PHP code


<html>
<head><title></title></head>
<style>
.title{
    width:100px;
       white-space:nowrap;    
        word-break:keep-all;    
       overflow:hidden;    
       text-overflow:ellipsis;   
 
}
</style>
<body>
<span class=title>标题显示太长省略多余部分并加省略号的样式</span> 
<div class=title>标题显示太长省略多余部分并加省略号的样式</div> 
</body>
</html>