如何设置CSS样式使网页中过长的新闻标题后面以省略号显示
同志们，我是菜鸟，请尽量说明白些。比如把什么代码放入什么里面。。。。
最新回答
少女爷爷
2024-10-22 14:31:50
前提是要固定宽度，如下
<li style="width:50px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">如何设置CSS样式使网页中过长的新闻标题后面以省略号显示</li>
而在样式中加上 overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 这段代码的意思是超出50px的长度后，后面以省略号显示。
江心薄雾起
2024-10-22 12:36:47
省略号用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来实现...
所以...你觉得哪个好用就用哪个...
冷魅
2024-10-22 10:10:32
在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改成你的元素。
筱冰蜜子
2024-10-22 10:22:58
噢耶
2024-10-22 13:29:09
热门标签
