js 或许JQUERY 让一行英文标题字数超出的话超出部分变成.-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20417 次

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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>