Question

div内多行文字， 溢出部分用省略号显示

目前遇到这种情况， div内有多行文字， div的长度和宽度都是固定的， 当文字内容大于溢出div时， 让溢出部分以省略号方式显示， 发帖希望得到纯CSS 解决方案， 暂时不想要jquery和伪代码的方式来解决， 有人遇到这种情况吗？

Answer 1

1、首先，显示标尺。正常情况直接见于word界面中上部。 2、光标停在公式所在的行，不要求行中的具体位置。 3、选择【格式】菜单中的-制表位(T)，在出现的对话框中设置你所需要的左制表位、右制表位、居中等，根据需要还可以设置前导符号(就像目录中页码前的省略号)。需要有点儿耐心，很快你就精通制表位的设置了。练习:设置一个左对齐的制表位为5个字符，一个右对齐的制表位为35个字符。清除不需要的制表位。 4、假设一行中有A、B两部分，在A、B之间加入一个TAB(按一下Tab键)，看一下效果。 学会之后，就可以灵活运用了。

Answer 2

可以,不过只适合WebKit浏览器。

在CSS样式中加入：

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: X; ————这个X表示要显示几行
-webkit-box-orient: vertical;
其中div的高度自己要规定好。

这个是单行的。

在CSS样式中加入

width:100px; //你所要的宽度
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden;

Answer 3

也是这个问题，搞定了。
//单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
//多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/*显示几行*/
overflow: hidden;

Answer 4

在CSS样式中加入

width:100px; //你所要的宽度
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden;

追问

white-space:nowrap;
这个属性应该是不允许换行， 我现在是多行文字， 最后几行的文字可能会溢出，所以要将后面溢出的几行用省略号来显示   类似于我们经常百度

最后的省略号那样    另外-o-text-overflow:ellipsis;
 这个属性应该不是兼容所有浏览器的吧？

追答

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; //这个表示要显示几行
-webkit-box-orient: vertical;
其中div的高度自己要规定好
我也是搜索理解帮你的 其实我也不太懂这个- -。你试试可以不，能解决就好啦

追问

这些方法都已经尝试过， 好多私有属性是不满足浏览器兼容性的，不过还是非常感谢.... 貌似目前还没有纯CSS的解决方式？ 这应该是很常见的问题，不知道为什么没有答案。

追答

因为有js jquery等便利的工具 何必一直纠结着只用CSS呢？