我不知道为什么这个简单的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 >
应该在第四次“测试”前后切断
我不知道为什么这个简单的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 >
应该在第四次“测试”前后切断
当前回答
我一直有这个问题,我想要一个解决方案,可以很容易地与动态宽度工作。解决方案使用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 >
其他回答
把这些写在你的css规则中。
display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
还要确保在IE10及以下版本中,换行设置为正常。
下面引用的标准将此属性的行为定义为依赖于“text-wrap”属性的设置。但是,wordWrap设置在Windows Internet Explorer中总是有效的,因为Internet Explorer不支持“文本自动换行”属性。
因此,在我的例子中,换行被设置为break-word(继承或默认?),导致文本溢出在FF和Chrome中工作,但在IE中不工作。
关于换行属性的Ms信息
我也遇到过同样的问题,似乎上面的解决方案都不适用于Safari。对于非safari浏览器,这工作得很好:
display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
对于Safari,这是适合我的。注意,用于检查浏览器是否是Safari的media查询可能会随着时间的推移而改变,所以如果它不适合您,只需修补一下media查询即可。有了线夹特性,也可以在有省略号的网中有多条线,见这里。
// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
@media {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
white-space: normal;
}
}
我一直有这个问题,我想要一个解决方案,可以很容易地与动态宽度工作。解决方案使用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 >
因此,如果您遇到这个问题是因为您在试图让省略号在display: flex容器内工作时遇到了麻烦,请尝试向最外层的容器添加min-width: 0,该容器正在溢出其父容器,即使您已经为它设置了overflow: hidden,并查看这对您来说是如何工作的。
关于这个代码的更多细节和工作示例由aj-foster编写。对我来说完全管用。