是否可能有文本溢出：省略号没有white-space：nowrap？ [英] Is it possible to have text-overflow: ellipsis without white-space: nowrap?

问题描述

看来 text-overflow：ellipsis 依赖于 white-space：nowrap 。这样做的问题是它将文本限制为一行。但是，如果我需要有4行，而在溢出的情况下，最后一行的省略号是什么？

It seems that text-overflow: ellipsis is dependent on white-space: nowrap. The problem with this is that it limits the text to one line. However, what if I need to have 4 lines, and the ellipsis on the last line in the case of overflow?

目前正在做什么...

What it's currently doing...

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 。

Unfortunately the behavior you are seeing is correct for text-overflow: ellipsis.

跨浏览器对连字符文本的支持并不是只有CSS的现实，但你可以看到一个很好的概括：
http://code.google.com/p/hyphenator/wiki/en_CSS3Hyphenation

Cross-browser support for hyphenated text is not a reality yet with CSS only, but you can see a good roundup of what's possible here: http://code.google.com/p/hyphenator/wiki/en_CSS3Hyphenation

某些浏览器专用CSS适用于firefox和webkit浏览器：

Some browser-specific CSS is available for firefox and webkit browsers:

-webkit-hyphens: auto;
-webkit-hyphenate-character: '~';
-moz-hyphens: auto;

连字符的最大问题是它需要语言感知才能正常工作，这很棘手。

The big issue with hyphenation is that it needs to be language aware to work properly, which is tricky.

也许像这样的JS解决方案会帮助你吗？
http：//code.google.com/p/hyphenator/

Maybe a JS solution like this will help you? http://code.google.com/p/hyphenator/

这篇关于是否可能有文本溢出：省略号没有white-space：nowrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！