如何在包装的文本上使用CSS文本溢出? [英] How to use CSS text-overflow on text that's wrapping?

问题描述

有人知道在包裹到第二行的一段文本上使用{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?

添加:

{whitespace: nowrap;}

使text-overflow起作用，但是我需要将文本换行，所以我真的不能使用它.

makes text-overflow work, but I need the text to wrap so I really can't use that.

推荐答案

如果您知道每次解决方案都可以将内容换成两行.使用::after和内容:'...';然后将其放置在您类型的右下角(应该是块级元素).仅当您要使用纯色背景色时才需要这样做，因为您需要将::after的背景设置为匹配.

If you know the content is going to wrap to two lines every time this solution will work. Use ::after and 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 ::after to 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文本溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！