css - 文本溢出：网格列中弹性框中的省略号

问题描述

我正在尝试实现以下布局：具有几列固定宽度的网格，其中一个具有未知宽度的内容，它将由多个span元素组成，不会换行，并且必须用省略号截断。

一个更具体的例子：

这是我尝试使用 flexbox 失败的方法：

.grid {
  width: 300px;
  border: 1px solid black;
  display: grid;
  grid-template-columns: [main] minmax(0, 1fr) [foo] 20px [bar] 20px
}

main {
  grid-column: main;
  white-space: nowrap;
  background: yellow;
}

.color-marker {
  height: 10px;
  width: 10px;
  background: red;
  border-radius: 50%;
}

.test {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.test > * {
  flex: 0 0 auto;
}


.foo {
  grid-column: foo;
  height: 20px;
  width: 20px;
  background-color: orange;
}

.bar {
  grid-column: bar;
  height: 20px;
  width: 20px;
  background-color: purple;
}

<div class="grid">
  <main>
    <div class="test">
      <div class="color-marker"></div>
      
      <span>
        Lorem ipsum
      </span>

      <span>
        sed do eiusmod tempor incididunt ut labore
      </span>

    </div>
  </main>
  <div class="foo">
  </div>
  <div class="bar">
  </div>
</div>

jsbin 上的相同示例

我还尝试使用内联网格而不是 flexbox，这也无济于事（jsbin 上的示例）。

有没有办法使这项工作？

免责声明：我意识到这个问题的变体已经在 Stack Overflow 上提出过；但没有一个建议的解决方案对我有用。以下是我检查过的线程：

我希望这不会使我的问题重复。

标签： csslayoutflexbox

解决方案

首先，看看这是否满足您的需求。有关所做的更改，请参阅代码注释。

编辑：现在任何一个跨度，但只有 1 个跨度，都会导致省略号。

编辑 2：这不会导致省略号继承其中一个跨度的颜色。省略号颜色可以在中独立设置.spanContainer。

.grid {
  width: 300px;
  border: 1px solid black;
  display: grid;
  grid-template-columns: [main] minmax(0, 1fr) [foo] 20px [bar] 20px
}

main {
  grid-column: main;
  white-space: nowrap;
  background: yellow;
}

.color-marker {
  height: 10px;
  width: 10px;
  background: red;
  border-radius: 50%;
  align-self: center;       /*<------------ added */
  flex: 1 0 auto;           /*<------------ added */
}

.test {
  display: flex;            
  justify-content: flex-start;  /*<------------ changed */
}

/* .test > * {                <------------ removed
  flex: 0 0 auto;
} */

.spanContainer {            /*<------------ added */
  overflow: hidden;         /*<------------ added */
  white-space: nowrap;      /*<------------ added */
  text-overflow: ellipsis;  /*<------------ added */
  width: 100%;              /*<------------ added */
  color: purple;            /*<------------ added set ellipsis color here*/
}

.foo {
  grid-column: foo;
  height: 20px;
  width: 20px;
  background-color: orange;
}

.bar {
  grid-column: bar;
  height: 20px;
  width: 20px;
  background-color: purple;
}

.span1 {
  color: red;
  font-size: 1rem;
}

.span2 {
  color: green;
  font-size: 0.5rem;
}

<div class="grid">
  <main>
    <div class="test">
      <div class="color-marker"></div>
      <div class="spanContainer">
        <span class="span1">
          Lorem ipsum
        </span>

        <span class="span2">
          sed do eiusmod tempor incididunt ut labore sed do eiusmod tempor incididunt ut labore
        </span>
      </div>
    </div>
  </main>
  <div class="foo">
  </div>
  <div class="bar">
  </div>
</div>

css - 文本溢出：网格列中弹性框中的省略号

问题描述

解决方案

推荐阅读