我不知道为什么这个简单的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 >

应该在第四次“测试”前后切断


当前回答

我必须做出一些长描述椭圆(只采取一个车道),同时响应,所以我的解决方案是让文本换行(而不是空白: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>

其他回答

添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App

demo

你只需要添加一行css:

.app a {
   display: inline-block;
}

因此,如果您遇到这个问题是因为您在试图让省略号在display: flex容器内工作时遇到了麻烦,请尝试向最外层的容器添加min-width: 0,该容器正在溢出其父容器,即使您已经为它设置了overflow: hidden,并查看这对您来说是如何工作的。

关于这个代码的更多细节和工作示例由aj-foster编写。对我来说完全管用。

我一直有这个问题,我想要一个解决方案,可以很容易地与动态宽度工作。解决方案使用css网格。 下面是代码的样子:

.parent { 显示:网格; Grid-template-columns: auto 1fr; } .dynamic-width-child { 空白:nowrap;} 文本溢出:省略; 溢出:隐藏; } .fixed-width-child { 空白:nowrap;} } < div class = "父" > < div class = " dynamic-width-child”> iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh; lshd flhsd; lhfaaaaaaaaaaaaaaaaaaaa < / div > < div class = " fixed-width-child”>为什么?zed < / div > < / div >

还要确保在IE10及以下版本中,换行设置为正常。

下面引用的标准将此属性的行为定义为依赖于“text-wrap”属性的设置。但是,wordWrap设置在Windows Internet Explorer中总是有效的,因为Internet Explorer不支持“文本自动换行”属性。

因此,在我的例子中,换行被设置为break-word(继承或默认?),导致文本溢出在FF和Chrome中工作,但在IE中不工作。

关于换行属性的Ms信息