我不知道为什么这个简单的CSS不能工作…
.app a { 高度:18 px; 宽度:140 px; 填充:0; 溢出:隐藏; 位置:相对; Margin: 0 5px 0 5px; text-align:中心; 文字修饰:没有; 文本溢出:省略; 空白:nowrap;} 颜色:# 000; ｝ < div class = "应用" > <a href="">Test Test Test Test Test Test Test</a> . < / div >
应该在第四次“测试”前后切断
当前回答
添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App
demo
其他回答
添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App
demo
你也可以添加float:left;在这个选择器内部:
#User_Apps_Content .DLD_App a
我必须做出一些长描述椭圆(只采取一个车道)，同时响应，所以我的解决方案是让文本换行(而不是空白:nowrap)，而不是固定宽度，我添加了固定高度:
span { display: inline-block; line-height: 1rem; height: 1rem; overflow: hidden; // OPTIONAL LINES width: 75%; background: green; // white-space: normal; default } <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au </span>
公认的答案是棒极了。但是，您仍然可以使用% width并获得text-overflow: ellipsis。解决方法很简单:
display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */
似乎无论何时使用calc，最终值都是以绝对像素表示的，因此对于1000px宽度的容器，将80%转换为800px之类的值。因此，不要使用width: [YOUR PERCENT]%，而是使用width: calc([YOUR PERCENT]%)。
文本溢出:省略;只有在以下情况下才有效:
元素的宽度必须限制在px(像素)。宽度在%(百分比)将不起作用。 元素必须有overflow:hidden和white-space:nowrap设置。
这里出现问题的原因是a元素的宽度没有限制。你确实有一个宽度设置，但因为元素被设置为display:inline(即默认值)，它会忽略它，也没有其他任何东西限制它的宽度。
你可以通过以下方法之一来解决这个问题:
将元素设置为display:inline-block或display:block(可能是前者，但取决于你的布局需要)。 将其中一个容器元素设置为display:block，并为该元素设置固定宽度或max-width。 将元素设置为float:left或float:right(可能是前者，但同样，就省略号而言，两者都应该具有相同的效果)。
我建议display:inline-block，因为这将对你的布局产生最小的附带影响;它的工作原理非常像显示:内联，它目前正在使用的布局，但也可以自由地尝试其他点;我已经尽可能多地提供信息来帮助你们理解这些东西是如何相互作用的;理解CSS的很大一部分是关于理解各种样式如何一起工作。
下面是您的代码片段，并添加了一个display:inline-block，以显示您有多接近。
.app a { 高度:18 px; 宽度:140 px; 填充:0; 溢出:隐藏; 位置:相对; 显示:inline-block; Margin: 0 5px 0 5px; text-align:中心; 文字修饰:没有; 文本溢出:省略; 空白:nowrap;} 颜色:# 000; ｝ < div class = "应用" > <a href="">Test Test Test Test Test Test Test</a> . < / div >
有用的参考资料:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
