似乎 text-overflow: ellipsis
依赖于 white-space: nowrap
。这样做的问题是它将文本限制为一行。但是,如果我需要有 4 行,并且在溢出的情况下最后一行的省略号怎么办?
它目前正在做什么...
Lorem ipsum dolor sit amet ...
我想要的...
Lorem ipsum dolor sit amet,
consectetur adipisicing el-
it, sed do eiusmod tempor
incididunt ut labore et ...
最佳答案
不幸的是,您看到的行为对于 text-overflow: ellipsis
是正确的。
跨浏览器对带连字符的文本的支持还不是仅使用 CSS 的现实,但您可以在此处看到对可能实现的功能的一个很好的总结: http://code.google.com/p/hyphenator/wiki/en_CSS3Hyphenation
一些特定于浏览器的 CSS 可用于 firefox 和 webkit 浏览器:
-webkit-hyphens: auto;
-webkit-hyphenate-character: '~';
-moz-hyphens: auto;
断字的最大问题是它需要语言感知才能正常工作,这很棘手。
也许像这样的 JS 解决方案会对您有所帮助? http://code.google.com/p/hyphenator/
关于css - 是否有可能出现文本溢出 : ellipsis without white-space: nowrap?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8068552/