css - 是否有可能出现文本溢出 : ellipsis without white-space: nowrap?

标签 css typography

似乎 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/

相关文章:

javascript - CSS定位/调整html5视频背景

html - 文本在 Safari 中的位置与在其他浏览器中的位置不同

css - 如何使用 CSS 将字符居中放置在框中?

whitespace - 防止 Outlook 2007 和 Outlook 2010 中 html 电子邮件中的连字符自动换行

python - 如何将普通引号转换为 Guillemets(法语引号),标签除外

css - 如何保持div的高度100%?

html - 在wordpress中消失的移动导航栏

javascript - 将自定义 CSS 类传递给 Kendo 的下拉小部件

html - 如何设置 html "select"元素的选项样式?

php - 将大文本分成列