如何设置CSS样式使网页中过长的新闻标题后面以省略号显示 10
如题，当鼠标放在标题上时显示全部内容。同志们，我是菜鸟，请尽量说明白些。比如把什么代码放入什么里面。。。。...
如题，当鼠标放在标题上时显示全部内容。
同志们，我是菜鸟，请尽量说明白些。比如把什么代码放入什么里面。。。。 展开
同志们，我是菜鸟，请尽量说明白些。比如把什么代码放入什么里面。。。。 展开
6个回答
展开全部
前提是要固定宽度，如下
<li style="width:50px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">如何设置CSS样式使网页中过长的新闻标题后面以省略号显示</li>
而在样式中加上 overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 这段代码的意思是超出50px的长度后，后面以省略号显示。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
教你一种很简单的方法...
省略号用CSS来实现...而鼠标放上显示全部内容用title来实现..
其实每一个元素都有一个title属性的..title不止是个标签而已.....
代码如下
<style>
div{
width:100px;
overflow:hidden;
text-overflow:ellipsis;
word-break:keep-all;/*强行不换行....*/
}
</style>
</head>
<body>
<div><a href="" title="CSS显示省略号">css显示省略号</a><div>
</body>
注意..把链接放到div里面..设置div的省略号样式..否则无效...
还有一点值得注意的....在firefox里....text-overflow并不支持...加上去是没有效果的....
如果利用hover让一个div隐藏或者来显示..在IE6跟firefox里是根本就不支持的...除非有一种情况是支持的..就是要把span...写到<a>标签的内部....然后让hover滑过的时候span出现.......
但是在firefox里有点特殊的就是...本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏或者显示的...但是IE6里却不能..必须采用JS来实现...
所以...你觉得哪个好用就用哪个...
省略号用CSS来实现...而鼠标放上显示全部内容用title来实现..
其实每一个元素都有一个title属性的..title不止是个标签而已.....
代码如下
<style>
div{
width:100px;
overflow:hidden;
text-overflow:ellipsis;
word-break:keep-all;/*强行不换行....*/
}
</style>
</head>
<body>
<div><a href="" title="CSS显示省略号">css显示省略号</a><div>
</body>
注意..把链接放到div里面..设置div的省略号样式..否则无效...
还有一点值得注意的....在firefox里....text-overflow并不支持...加上去是没有效果的....
如果利用hover让一个div隐藏或者来显示..在IE6跟firefox里是根本就不支持的...除非有一种情况是支持的..就是要把span...写到<a>标签的内部....然后让hover滑过的时候span出现.......
但是在firefox里有点特殊的就是...本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏或者显示的...但是IE6里却不能..必须采用JS来实现...
所以...你觉得哪个好用就用哪个...
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在CSS中，text-overflow:ellipsis;可以在文本隐藏时候在文本末尾加入省略号。所以如果Html里是用li写的。
<style>
li{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block;word-break:keep-all;
</style>
<ul>
<li>本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏</li>
</ul>
这样子就可以，你可以把li改成你的元素。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.....你在<body>.....</body>里面写两个div元素，然后第一个是需要尺寸的省略号，然后第二个是完整标题，然后默认把第二个div隐藏掉（怎么隐藏掉有很多方法爱用哪个用哪个），给它设置hover样式，最后在hover里面正常显示即可 ......
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
写两个div元素，第一个是需要尺寸的省略号，第二个是完整标题，然后默认把第二个div隐藏掉（怎么隐藏掉有很多方法爱用哪个用哪个），给它设置hover样式，在hover里面正常显示即可
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
