如何省略网格布局中的内容自动宽度容器单元格？
有一个具有网格布局和固定宽度的div。
它的一个子级是一个容器，并且通过模板具有自动宽度。
在容器内部，这是我想要省略的内容。
似乎容器的宽度不正确，它不等于300px - 30px - 50px。我怎样才能改变这一点？
div {
box-sizing: border-box;
}
.grid-layout {
width: 300px;
display: grid;
grid-template-columns: 30px auto 50px;
}
.left {
grid-column-start: 1;
}
.ellipsis-container {
grid-column-start: 2;
}
.ellipsis-content {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.right {
grid-column-start: 3;
}<div class="grid-layout">
<div class="left">Left</div>
<div class="ellipsis-container">
<div class="ellipsis-content">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</div>
</div>
<div class="right">Right</div>
</div>
回答 2
Stack Overflow用户
发布于 2020-05-10 13:56:11
将overflow添加到容器中是可行的。
问题
然而，您的问题更多地是针对为什么我的容器中auto的值不能解析为300px-30px-50px__？它应该是220px，但为什么要扩展到600px+？
回答
这是由于white-space: nowrap造成的。文本无法换行，导致它将宽度扩展到一个很长的值。但是，为什么容器在其子容器扩展时也会扩展呢？auto不是应该解析为220px吗，即使它的子扩展超过了那个值？这是因为在这种情况下，auto is identical to the value max-content。这意味着auto值将解析为max-content。然后，max-content将解析为该特定列的最大max-content contribution值。那么max-content contribution是什么呢？它是列的“子元素”的宽度值，导致容器的max-content size发生变化(在本例中，容器是列)。max-content本身指的是允许的最小大小，但仍然适合中的所有内容，而不会溢出。您的nowrap文本非常长，其max-content大小为600px+。这就是为什么容器也解析为600px+ (因为auto解析为最大的 max-content contribution)。
div {
box-sizing: border-box;
}
.grid-layout {
width: 300px;
display: grid;
grid-template-columns: 30px auto 50px;
}
.left {
grid-column-start: 1;
}
.ellipsis-container {
grid-column-start: 2;
overflow-x: hidden;
}
.ellipsis-content {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.right {
grid-column-start: 3;
}<div class="grid-layout">
<div class="left">Left</div>
<div class="ellipsis-container">
<div class="ellipsis-content">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</div>
</div>
<div class="right">Right</div>
</div>
Stack Overflow用户
发布于 2020-05-10 13:57:21
也将overflow添加到容器.ellipsis-container。
.ellipsis-container {
grid-column-start: 2;
overflow-x: hidden;
}
div {
box-sizing: border-box;
}
.grid-layout {
width: 300px;
display: grid;
grid-template-columns: 30px auto 50px;
}
.left {
grid-column-start: 1;
}
.ellipsis-container {
grid-column-start: 2;
overflow-x: hidden;
}
.ellipsis-content {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.right {
grid-column-start: 3;
}<div class="grid-layout">
<div class="left">Left</div>
<div class="ellipsis-container">
<div class="ellipsis-content">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</div>
</div>
<div class="right">Right</div>
</div>
https://stackoverflow.com/questions/61707724
复制相似问题
腾讯云开发者
