<分区>
我有一个类似于下面 header 中的网格布局。 div中有一段文字，其宽度为1fr。我希望该 div 中的文本在太长时被截断。将 text-overflow 添加为 ellpsis 无效。知道怎么做吗？
它必须是网格，我无法更改它。
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
display: flex;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
}
content {
flex: 1;
background-color: red;
}
header {
background-color: limegreen;
display: grid;
grid-template-columns: 0fr 1fr 0fr;
}
header div {
border: 1px solid orange;
}
.long {
text-overflow: ellipsis;
}<div class="container">
<header>
<div>Left</div>
<div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>Right</div>
</header>
<content>
</content>
</div>