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

Question

我有一个类似于下面 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>

Answer 1

在使用 text-overflow

时添加 overflow: hidden 和 white-space: nowrap

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;
  white-space: nowrap;
  overflow: hidden;
}

<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>

Answer 2

1) when use text-overflow: ellipsis; must use overflow: hidden; too.

2)white-space: nowrap; Does not allow text break in new line.

所以，像这样改变：

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

Answer 3

定义一个高度，设置white-space为nowrap和overflow: hidden

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 {
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  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>

Answer 4

将 .long css 更改为以下

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

需要加white-space和overflow的原因如下：

你需要white-space: nowrap告诉浏览器当文本长度超过包含块宽度时不要换行，white-space属性默认值是正常的，这表明它可以换行，所以它不会存在文本溢出的情况；
overflow默认值是可见的，当文本超出包含块时，它只是显示，所以不需要溢出文本来显示，只有将overflow设置为hidden.然后，当文本不能完全显示时，它将使用 text-overflow 属性.

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

How do I set text-overflow to ellipsis in CSS grid layout?

css

css-grid