CSS超出宽度改为省略号显示问题!
HTML类容:<divclass="widget-area"id="secondary"role="complementary"><asideclass="widgetw...
HTML类容:
<div class="widget-area" id="secondary" role="complementary">
<aside class="widget widget_recent_entries" id="recent-posts-2">
<h3 class="widget-title">近期文章</h3>
<ul>
<li><a href="连接">linux下rm命令用法</a></li>
<li><a href="连接">巧用Ping命令开机延迟启动程序!</a></li>
<li><a href="连接">淘宝/天猫快速加入购物车代码</a></li>
<li><a href="连接">chmod改变一个或多个文件/文件夹的存</a></li>
</ul>
</aside>
</div>
部分CSS代码:
.widget-area ul li a
{
TEXT-DECORATION:none;
overflow:hidden;
}
.widget-area ul li
{
width:240px;
display:block;/*内联对象需加*/
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容*/
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
效果:
IE下的效果:
google浏览器效果: 展开
<div class="widget-area" id="secondary" role="complementary">
<aside class="widget widget_recent_entries" id="recent-posts-2">
<h3 class="widget-title">近期文章</h3>
<ul>
<li><a href="连接">linux下rm命令用法</a></li>
<li><a href="连接">巧用Ping命令开机延迟启动程序!</a></li>
<li><a href="连接">淘宝/天猫快速加入购物车代码</a></li>
<li><a href="连接">chmod改变一个或多个文件/文件夹的存</a></li>
</ul>
</aside>
</div>
部分CSS代码:
.widget-area ul li a
{
TEXT-DECORATION:none;
overflow:hidden;
}
.widget-area ul li
{
width:240px;
display:block;/*内联对象需加*/
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容*/
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
效果:
IE下的效果:
google浏览器效果: 展开
2个回答
展开全部
这个用css不能实现 的,网站上面的这种一般都是用后台程序实现的,比如说在后台读取一条数据的时候,用方法来限制这条数据显示的字符长度,如果超出了就在这条数据后面显示几个缩略号
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你的代码我直接游览器测试了下,都没有问题包括ie5也没有问题。不知道你那边是怎么回事呢。实在不行你就固定li的高就行了。
更多追问追答
追问
哎,好吧,我在本地测试也是可以的,上线了就不行了,我再找找是不是其它什么地方代码影响了!
追答
我认为你设置li的高就可以的了
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询