DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度！
CSS 中的text-overflow属性用于处理文本溢出元素框时被裁剪的情况。它可以被裁剪（即切断、隐藏），显示省略号（'…'，Unicode 范围值 U+2026）或显示作者定义的字符串（目前浏览器不支持作者定义的字符串）。
.ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}请注意，只有当容器的overflow属性值为hidden、scroll或auto，并且white-space: nowrap;时，才会发生text-overflow。
文本溢出只能发生在块级或内联块级元素上，因为元素需要具有宽度才能发生溢出。溢出方向由direction属性或相关属性确定。
以下演示显示了text-overflow属性的所有可能值的运行行为。浏览器支持各不相同！
将overflow设置为scroll或auto将显示滚动条以显示其他文本，而hidden则不会。隐藏的文本可以通过选择省略号来选择。
旧内容
一个旧版本的规范表示可以使用图像的 URL 作为省略号，但看起来它已被删除了。
有一个双值语法，例如text-overflow: ellipsis ellipsis;，它可以控制同一容器左右两侧的溢出。我不确定如何实现这一点。也许是在太小的容器中居中的文本？新的规范也提到了这一点，并且定义了一个字符串，但“有风险”。
我不确定ellipsis-word来自哪里。它既不在规范中，也不在 WebPlatform.org 以外的任何其他文档中。
text-overflow属性曾经是text-overflow-mode和text-overflow-ellipsis组合的简写，但现在不再是了，并且这些单独的属性也不存在了。
相关属性
其他资源
浏览器支持
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 25+ | 5.1+ | 19+ | 12.1+ | IE8+ | 2.1+ | 3.2+ |
我在我的博客中发现了这个错误。我创建了这个jsfiddle：http://jsfiddle.net/GnKFM/
我在网上找到了这个官方线程。https://code.google.com/p/chromium/issues/detail?id=133700 – 问题133700：text-overflow:ellipsis无法正确处理内联块子元素。你知道吗？你知道解决它的技巧吗？
谢谢
我使用此代码来避免text-overflow
.open > .dropdown-menu {overflow: auto;
display: block;
Text-overflow:ellipsis;
}
但仍然无法在[xyz…]中找到结果
有什么建议吗
在其中添加此行
white-space: nowrap;
如果您有一个没有空格的长字符串，则text-overflow也可以与
white-space: normal;一起使用（使用默认空格）当您使用自定义字形作为font-family属性加上省略号效果时，ie9渲染存在问题。目前尚不清楚解决方案是什么。
text-overflow: ‘… more’;
非常感谢，运行良好（现在正在进行Firefox测试）！
我遇到了text-overflow的问题，我使用此代码显示结果“vwxy…”
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
但结果不像“vwxy…”
您应该为该框定义宽度，并且宽度应小于文本长度。
您可以查看此内容 -> 您的文本链接到此处…
剪裁是否适用于滚动条。
看起来text-overflow: ellipsis在设置text-align: right时会被忽略。
text-overflow在联想平板电脑S5000的默认浏览器中不起作用。我已经使用了
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
所有浏览器都使用上述代码正常工作。
但它在联想平板电脑中不起作用。如何解决？
停止购买联想平板电脑。
html css示例 – 使用内联CSS隐藏div中的内容
永远*购物的新方法。*
使用display:none;隐藏html/css的最佳方法。
例子！！
你好..
.hideClass
{display:none;}
还使用此代码通过内联css隐藏内容
我认为您没有理解本文的重点。
哇...这真是个很棒的技巧。
非常感谢，
但任何解释为什么或如何min-width解决问题？
至少告诉我 - 您是如何发现设置min-width可以解决问题的？