Html 为什么最大宽度为0时会出现这种情况？

看

该行为是所需的行为，它允许3列布局中的中心列占用所有可用空间，并且在收缩足够大时仍允许其内部的文本溢出为省略号。这似乎是因为

最大宽度：0

，但为什么会产生这种效果

在这种情况下，

max width:0

有什么特别之处

.row{
宽度：100%；
显示：表格；
}
上校{
位置：相对位置；
最小高度：1px；
边框：1px#000实心；
显示：表格单元格；
}
.x{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
宽度：100%；
最大宽度：0；
}

abc
测试等等，等等，等等。
def

注意：它不仅仅是

最大宽度：0

，它是小于文本内容宽度的任何宽度

display:table cell

、

max width

和

width:100%

的混合构成了一个有趣的情况，规范并未明确涵盖。然而，通过观察和思考，我们可以理解为什么我们在所有主要浏览器中都有相同的行为

max width:0

尝试将元素宽度设为0，当然，这意味着所有内容都应该溢出。但是，如中所示，

display:table cell

和

width:100%

的组合在很大程度上覆盖了

div

的该命令（原因可能相同）。因此，元素会像没有

max width:0时一样显示自己，直到
div
的宽度不再足以包含所有文本内容

在我们继续之前需要注意的是，默认情况下，文本本身的宽度由其内部的字符设置。它是父
div
的子元素，尽管没有标记

文本内容固有的宽度是创建效果需要
max width:0
的原因。一旦
div
的宽度不再足以容纳所有内容，则
max width:0
属性会使宽度小于文本内容的宽度，但会强制不再适合的文本成为
div
本身的溢出。因此，由于
div
现在有文本溢出，并且设置了
文本溢出：省略号
，因此文本溢出被省略号化（如果是单词）

这对我们非常有用，因为如果没有大量凌乱的JavaScript，我们就无法实现这一效果

注意：这个答案描述了这种行为，并给出了一些关于为什么会出现这种情况的见解。它不包括
显示：表格单元格
如何覆盖
最大宽度
的部分影响。
这不是一个完整的答案，而是一个贡献

在这种情况下，最大宽度0有什么特别之处

我不确定，但细胞似乎给了另一个调整的机会。（可能，算法点2）

根据我的实验，仅应用具有固有宽度的替换元素。在这种情况下，文本块的固有宽度为空白：nowrap

没有内部宽度的项目在不使用最大宽度0的情况下非常适合



*{
框大小：边框框；
}
.桌子{
显示：表格；
宽度：300px；
}
.行{
宽度：100%；
显示：表格行；
}
上校{
边框：1px#000实心；
显示：表格单元格；
}
.a{
最小宽度：80px；
}
.x{
背景：0立方英尺；
溢出：隐藏；
文本溢出：省略号；
宽度：100%；
}
.y{
最大宽度：0；
}
.z{
空白：nowrap；
}

abc
结束
abc
结束
abc
因空白属性设置为nowap而产生的固有宽度。
结束
abc
因空白属性设置为nowap和Max Width而产生的固有宽度
结束
abc
内部宽度DueNoSpacesintextandBlahin内部宽度DueNoSpacesintextandBlah
结束
abc
IntrinsicWidthduenospacesintextandMaxWidth
结束
abc
非固有宽度。内联的、未替换的元素内联的、未替换的元素内联的、未替换的元素。
结束
我认为BoltClock对Zach Saucier的回答的评论——行为是未定义的——是一个很好的理由，可以避免依赖今天的浏览器恰好表现出所需的行为这一事实

很多人（像我一样）会提出这个问题，不是因为他们对
max width:0
在这种情况下的含义有学术兴趣，而是因为他们想知道使用这种方法是否可以在表格单元格中显示文本的省略号，而FWIW我认为答案是：“不是真的”

在这种情况下，让省略号起作用的更好方法是在
元素上使用“
表格布局：固定的”
”，如中所述。
这是我观察到的，但对我来说似乎足够神奇，我觉得我需要更好地理解…特别是表格单元格如何影响最大宽度和宽度之间的关系，因为上面说最大宽度优先于宽度。我很想看一些文档或规范来解释这一点。@Lonimor这可能是因为-也许表格单元格也是如此？@ScottLerch我也是！但既然我们找不到，那么投机又有什么错呢？这不是问答的全部要点吗？没什么，我不介意猜测，但这不是真正的答案。我只是想鼓励一个有引文支持的答案，然后我会投票给你的答案：）“在CSS 2.1中，“最小宽度”和“最大宽度”对表、内联表、表单元格、表列和列组的影响是未定义的。”