如何在换行的文本上使用 CSS 文本溢出？
有谁知道如何在换行到第二行的文本上使用 {text-overflow: ellipsis;} ？
添加：
{whitespace: nowrap;}
使 text-overflow 工作，但我需要文本换行，所以我真的不能使用它。
Does anybody know of a way to use {text-overflow: ellipsis;} on a piece of text that's wrapping to a second line?
Adding:
{whitespace: nowrap;}
makes text-overflow work, but I need the text to wrap so I really can't use that.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您知道每次此解决方案起作用时内容都会换行为两行。使用
::after和 content: '...';然后将其放置在类型的右下角（应该是块级元素）。仅当您使用纯色背景时，这才有效，因为您需要设置::after的背景来匹配。唯一的缺点是它可以成功的参数有限，而且如果事情不正确的话它会将角色切成两半（他们可能不会）。
If you know the content is going to wrap to two lines every time this solution will work. Use
::afterand content: '...'; and then position it over the bottom right corner of your type (which should be a block level element). This will only work if you are working against a solid background color as you need to set the background of the::afterto match.The only downfall is the limited parameters this can be successful in and the fact that it will cut a character in half if things don't line up right (which they probably won't).
我相当确定你想要做的事情在纯 CSS 解决方案中是不可能的。然而，有一种方法可以将类似的结果组合在一起。这是我所做的：
http://cce.usyd.edu .au/courses/Business+%26+Management/Business+Communication
看到介绍每门课程的文字块上的淡出效果了吗？这是通过首先以通常的方式限制溢出，然后将另一个 div 放在最后一行的顶部并在 CSS 中实现淡入淡出来完成的。除了淡入淡出之外，您还可以插入省略号或其他视觉线索。
因此，不完全按照您想要的方式解决它，而是实现类似的 UI 结果以确保用户意识到内容被截断。个人觉得还是蛮漂亮的:-)
I am fairly sure that what you are trying to do is impossible in a pure CSS solution. However there is a way of hacking together a similar result. Here is what I did:
http://cce.usyd.edu.au/courses/Business+%26+Management/Business+Communication
See the fade on the block of text introducing each course? That was done by firstly restricting the overflow in the usual way and then placing another div over the top of the last line and implementing the fade in CSS. Instead of a fade you could also insert an ellipsis or some other visual clue.
So, not exactly solving it the way you want, but achieving a similar UI result to ensure the user is aware that content is truncated. Personally I think it is quite pretty :-)