CSS文本溢出：省略号; 不工作？
我不知道为什么这个简单的CSS不工作…
CSS：
.app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; font: bold 15px/18px Arial; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #FFF; } HTML：
<div class="app"> <img src=""></img> <h1></h1> <a href=""></a> </div>
text-overflow:ellipsis; 只有在以下情况下才有效：
- 元素的宽度必须以
px（像素）为单位进行约束。 以百分比表示的宽度将不起作用。 - 元素必须有
overflow:hidden和white-space:nowrap设置。
你在这里遇到问题的原因是因为你a元素的width不受限制。 你有一个width设置，但因为该元素设置为display:inline （即默认）它忽略了它，没有其他任何限制其宽度。
您可以通过执行以下任一操作来解决此问题：
- 设置要
display:inline-block的元素display:inline-block或display:block（可能是前者，但取决于您的布局需求）。 - 设置其中一个容器元素以
display:block并为该元素指定一个固定width或max-width。 - 将元素设置为
float:left或float:right（可能是前者，但是再一次，就省略号而言应该具有相同的效果）。
我build议display:inline-block ，因为这将有最小的影响你的布局; 它的工作原理和display:inline非常相似display:inline就目前使用的布局而言，它是display:inline的，但是也可以随意尝试其他的方面; 我尽可能地提供尽可能多的信息来帮助你理解这些事物如何相互作用。 了解CSS的很大一部分是了解各种风格如何协同工作。
希望有所帮助。
这是一个你的代码jsfiddle ， display:inline-block添加display:inline-block ，以显示你是多么接近。
有用的参考：
还要确保在IE10及以下版本中将word-wrap设置为正常 。
下面引用的标准将此属性的行为定义为依赖于“文本包装”属性的设置。 但是，WordWrap设置在Windows Internet Explorer中始终有效，因为Internet Explorer不支持“text-wrap”属性。
因此，在我的情况下， word-wrap设置为断字 （inheritance或默认？）导致text-overflow工作在FF和Chrome，而不是在IE浏览器。
关于word-wrap属性的ms信息
anchor ， span …标签默认是内联元素 ，如果内联元素的width属性不起作用。 所以你必须将你的元素转换为inline-block或block level元素
添加display: block; 或者display: inline-block; 到您的#User_Apps_Content .DLD_App a
演示
你只需要添加一行css：
.app a { display: inline-block; }
你也可以添加float：left; 在这个类里面#User_Apps_Content .DLD_App a
在省略号的信息之后join四行
.app a { height: 18px; width: 140px; padding: 0; position: relative; margin: 0 5px 0 5px; font: bold 15px/18px Arial; text-align: center; text-decoration: none; color: #FFF; /* **Note:**The Below 4 Lines are necessary for ellipsis to work */ display: block; // change it as per your requirement overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
