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

最后的单词必须要完整
比如 I want this effect, not that one.变成I want this effect,not ....
不是I want this effect,no....自己JS这块不怎么行，没有写出来。有没有写过的，HELP ME

解决方案 »

  1.   

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

  2.   


     
    <!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>
      

  3.   

    css  实现  。。<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>