如何在CSS网格布局中将文本溢出设置为省略号？

我有一个类似下面

标题中的网格布局。div中有一个文本，其宽度为
1fr
。我希望该div中的文本在过长时被截断。将
文本溢出添加为
ellpsis
无效。知道怎么做吗

它必须是网格，我没有办法改变它


html，
身体{
身高：100%；
宽度：100%；
溢出：隐藏；
}
身体{
显示器：flex；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
内容{
弹性：1；
背景色：红色；
}
标题{
背景色：柠檬黄；
显示：网格；
网格模板列：0fr 1fr 0fr；
}
标题div{
边框：1px实心橙色；
}
.朗{
文本溢出：省略号；
}

左边
知识是一种美德，是一种美德，是一种美德，是一种美德。
赖特
使用
文本溢出时添加
溢出：隐藏
和
空白：nowrap


html，
身体{
身高：100%；
宽度：100%；
溢出：隐藏；
}
身体{
显示器：flex；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
内容{
弹性：1；
背景色：红色；
}
标题{
背景色：柠檬黄；
显示：网格；
网格模板列：0fr 1fr 0fr；
}
标题div{
边框：1px实心橙色；
}
.朗{
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

左边
知识是一种美德，是一种美德，是一种美德，是一种美德。
赖特

1） 使用
文本溢出时：省略号必须使用
溢出：隐藏也是

2） 
空白：nowrap不允许在新行中使用文本分隔符

所以，像这样改变：

.long {
  text-overflow: ellipsis;
  overflow: hidden;/*/<------------new/*/
  white-space: nowrap;/*/<---------new/*/
}

.long{
文本溢出：省略号；
溢出：隐藏；/*/定义高度，将
空白
设置为
nowrap
和
溢出：隐藏


html，
身体{
身高：100%；
宽度：100%；
溢出：隐藏；
}
身体{
显示器：flex；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
内容{
弹性：1；
背景色：红色；
}
标题{
背景色：柠檬黄；
显示：网格；
网格模板列：0fr 1fr 0fr；
}
标题div{
边框：1px实心橙色；
}
.朗{
高度：20px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

左边
知识是一种美德，是一种美德，是一种美德，是一种美德。
赖特
将长css更改为以下内容

.long {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

需要添加空白和溢出的原因如下：

当文本长度超过包含块宽度时，您需要
空白：nowrap
告诉浏览器不要换行，
空白
属性默认值是正常的，这表明它可以换行，因此不会出现文本溢出的情况
溢出
默认值可见，当文本超过包含块时，它只显示，因此不需要溢出文本来显示，只要将
溢出
设置为
隐藏
。然后，当文本无法完全显示时，它将使用
文本溢出
属性
将此属性添加到.long{white space:nowrap；overflow:hidden；text overflow:elipes；}希望这是一个参考链接@Michael_B这对我来说似乎是独一无二的，不是重复的，OP询问关于使用CSS网格截断到一行的问题，这与链接副本中的多行非网格解决方案不同question@Lounge9，重要的不是问题，而是答案。这个问题有一个共同点请在副本中填写答案。（因此，上面的注释说明：这个问题在这里已经有了答案）。这个对我不起作用。当在网格布局中使用FR单元时，它似乎只是扩展了框。还是我做错了什么？通常上面的代码可以工作，但我第一次在网格布局中尝试。这并没有回答最初的问题，文本在css网格元素的容器中。这并不能完全回答问题在CSS网格布局上下文中截断文本的操作。当我添加
max width:100%
时，它开始对我起作用。@MortenHjort在网格定义中添加
minmax
，例如：
网格模板列：minmax（0，1fr）
。请参阅@e18r-perfect，这就像一个魔咒！这是在Chrome中可以使用的技巧，但FireFox（目前为v57）除外似乎不能很好地处理截断，尤其是在CSS网格中。
.long
元素只会将
.container
推得更宽。要在网格项中包含省略号文本，您需要在容器上设置
最小高度：0
。检查它在代码段中的工作情况……不确定为什么我的注释中出现-1，因为有人给出了确切的同样的答案，在我得到投票结果后…@darkyndy你的意思是
最小宽度：0
。这是一个很好的解决方案。这是唯一一个不需要指定固定像素宽度就可以解决问题的解决方案，这将彻底破坏CSS网格的用途！