css 文本超出就隐藏并且显示省略号，css超过字数显示省略号

css怎样让HTML中超出的内容显示为省略号

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法
一是用程序开截取字符长度，这个其实也是可以的
第二种是用样式来做,这里主要介绍一下用样式怎么来做吧，我话也不多说了吧直接上代码吧，

css样式如下：
[css]
.css1{
color:#6699ff;border:1px #ff8000 dashed;
margin-bottom:20px;
width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20em;/*不允许出现半汉字截断*/
color:#6699ff;border:1px #ff8000 dashed;
}
[/css]

html代码如下：
[html]

Web前端开发 – 专注于网站前端设计与Web用户体验

Web前端开发 – 专注于网站前端设计与Web用户体验

如何实现css超出显示省略号

ie6实现css超出显示省略号必须是直接对最里面的标签定义宽度。所以好的兼容ie6/7/8/火狐/谷歌的css实现超出显示省略号需要文字的直接父级 定义宽度 和 如上代码。

CSS 超出范围的文字显示成省略号

我也想用CSS来控制多行超出用省略号表示，如果CSS你会的话，可以教我。如果不会，我可以教你用jS或者jquery解决你的问题

css中如何使鼠标经过过长文字(溢出部分已隐藏为省略号)时全部显示下划线(包括省略号在内)，如图所示：

有点麻烦，有几个问题：

用css的text-overflow: ellipsis;显示省略号IE貌似很好，但FF这贱狐狸精和其他某些贱浏览器不支持，只有用xxx:after{content:'...';}来添加省略号。网上还有种方法是加个span里面用三个点的背景图来模拟省略号，而你上传的图应该是ps的你想要的效果，但看不出来你是通过什么方式弄的省略号出来？

这个问题我没写代码在几个浏览器下实测，只是脑袋里面大概想了下，估计要是用text-decoration下划线的方式来搞定几大内核，同时实现a:hover状态链接和省略号都带下划线有可能做不到。

你只有试试把a定义成display:block块级元素后看省略号的点范围是不是算在块的长度里面的，是的话就好办，用1px的横线背景图(长度刚好跟省略号长度一样)来实现。当a:hover时出现这个背景图居下、右对齐不重复就行了。

如果a定义块级后，省略号不是算在块里面的，基本上纯css你的问题是无解了，你只有考虑结合js。

另外你这个要求本身意义不大，这种无关紧要的小细节不必花时间去搞

html+css 如何让下图文字部分超出的部分用省略号表示。

展开全部


text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;