[技术探讨]用css来实现标题内容超出长度范围自动省略,且有鼠标提示

2005-12-15 06:26:06 1.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

TMT人才如何，穿透文字，知行合一：十五五规划，如何用好你的财情生态位？更重要的是你，所在的企业、家庭，如何找到自己的有利生态位，以及你内在的心理素质和能量，能否顺势而为。否则单纯的人云亦云，追逐热点，吃屎都赶不上热乎的（回顾过20年的热点，有多少人是，吃屎都赶不上热乎的？我们的“财情双生法”正是为了解决这种“看懂却做不到”或者“盲目追随”的问题，帮助个体和企业，从国家层面的宏大叙事中，找到自己的**“有利生态位”**。它能帮你更好地了解自己，找到激活“财”的智慧和“情”的力量的起点，从而在时代大潮中，真正地“顺势而为”，活出丰盛自在的人生！政策的落地和利益的博弈，离不开人。阅读详情

http://wzhiyuan.net/mydoc/ellipsis.htm
很多时候，我们希望一些文字(比如网站首页新闻块的标题),在一行内显示，并且超出它的长度范围时，则加...省略，并且出现提示。
我们通常的解决方法是在服务器端判断内容的长度，超出多少个字符则截断，并添加title提示。asp代码类似如下：
<%
if len(mystr)>20 then
response.write "" & left(mystr,17) & "..."
else
response.write "" & mystr & ""
end if
%>
这样的方法有几个缺点：

1,消耗服务器资源。
2,通用性差.一旦你的显示宽度变化了，你就需要重新调整要显示的字符个数。
3,更重要的是,常常对不齐。一是字符种类(汉字,大小写字母，全半角标点)不同，则宽度不同。二是字号大小不同，宽度也不同，最大号字和最小号字的宽度差了很多。
因此，这种方法显得不够理想，我们有必要另想办法。
解决办法：先看示例，,其中表格内左右两块内容完全相同。超出长度的自动省略了，并有提示。注意第二行，在左边，由于容器宽度不够，它是省略有提示的，在右边，由于宽度够，则它是普通模式。你还可以调整IE的“查看》文字大小”，调成不同的字大小看一看，刷新后再调几下。这里是相关示例代码，你可以修改后运行：
<style>
#leftnewstd .ellipsis_row{width:170px}
#rightnewstd .ellipsis_row{width:250px}
.ellipsis_row{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
wzy:expression( this.title=this.offsetWidth<this.children(0).offsetWidth?this.children(0).innerText:'',
this.style.wzy=''
);
background-color=#b0b0b0;
}
</style>
<table ><tr>
<td id=leftnewstd width=200px bgcolor=#f0f0ff >
多以开源起家美国计算机专业前20名著名学校点评 
挑战微软数据库管理案例 
WWW：15年谁主沉浮？
</td>
<td id=rightnewstd width=280px bgcolor=#f0fff0>
多以开源起家美国计算机专业前20名著名学校点评 
挑战微软数据库管理案例 
WWW：15年谁主沉浮？
</tr></table>

解释：样式中的overflow,text-overflow,和white-space,三者来结合实现省略功能。css表达式 expression来实现，加提示。用this.offsetWidth<this.children(0).offsetWidth来判断是内容是否超过容器宽度。是的话，加title提示.应用完表达式之后，用this.style.wzy=''来清空它，以免影响页面效率。

...全文