如何在 CSS 网格布局中将文本溢出设置为省略号？ [复制]答案

【问题标题】：How do I set text-overflow to ellipsis in CSS grid layout? [duplicate]如何在 CSS 网格布局中将文本溢出设置为省略号？ [复制]
【发布时间】：2017-11-09 20:59:42
【问题描述】：

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

【问题讨论】：

将此属性添加到 .long { white-space: nowrap;overflow:hidden;text-overflow:elipses;} 希望这里有效是参考链接css-tricks.com/snippets/css/truncate-string-with-ellipsis
@Michael_B 这对我来说似乎是独一无二的，不是重复的，OP 正在询问使用 CSS Grid 将其截断为单行，这是与链接副本中的多行非网格解决方案不同的野兽问题
@Lounge9，这并不是真正重要的问题。这是答案。而这个问题在副本中有完整的答案。（因此，上面的注释指出：这个问题在这里已经有了答案）。

标签： css css-grid

【解决方案1】：

将 .long css 改为下面

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

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

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

【讨论】：

这个对我不起作用。在网格布局中使用 FR 单元时，它似乎只是扩展了框。还是我做错了什么？通常上面的代码可以工作，但我第一次尝试网格布局。
这没有回答原始问题，即文本位于作为 CSS 网格元素的容器内。
这并没有完全回答在 CSS 网格布局上下文中截断文本的问题。当我添加 max-width: 100% 时，它开始为我工作。
@MortenHjort 在您的网格定义中添加minmax，如下所示：grid-template-columns: minmax(0, 1fr)。见css-tricks.com/preventing-a-grid-blowout
@e18r - 完美，效果很好！

【解决方案2】：

1) 使用text-overflow: ellipsis;时也必须使用overflow: hidden;。

2)white-space: nowrap; 不允许换行。

所以，像这样改变：

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

【讨论】：

【解决方案3】：

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

【讨论】：

这是适用于 Chrome 的技巧，但 FireFox（当前为 v57）似乎不能很好地处理截断，尤其是使用 CSS 网格。 .long 元素只是将.container 推得更宽。

【解决方案4】：

定义一个高度，将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>

【讨论】：

要在网格项中包含省略号文本，您需要在容器上使用min-height: 0。检查dev.to/timhecker/…
它在代码 sn-p 中工作......不知道为什么我的评论得到 -1，而在我之后给出完全相同答案的人得到了赞成的答案......跨度>
@darkyndy 你的意思是min-width: 0。虽然很好的解决方案。这是唯一真正解决问题的解决方案，而无需指定以像素为单位的固定宽度，这将完全违背 CSS Grid 的目的！