css 文本溢出：省略號在跨度上無法正常工作

Question

我在這樣的 div 中有一個跨度：

如您所見，當您使用text-overflow: ellipsis時，文本會溢出，但不會像往常一樣溢出三個點。

這是我的相關html：

<div class="row main">
    <span class="kurzbezeichnung">
      <mat-icon svgIcon="file"></mat-icon>
      Hello! This is a longer text to see if overflow ellipsis effect will get
      applied!
    </span>

    //here is some more stuff of course, but this is the relevant code
</div>

這是相關的 CSS：

.row {
  & span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
}

.kurzbezeichnung {
  width: 150px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row {
  display: flex;
  flex-direction: row;
  gap: 18px;
  width: 100%;
}

為什么沒有三個點會溢出？

Answer 1

將標簽更改為並向 class 添加“white-space:nowrap”

HTML

<div class="row main">
    <div class="kurzbezeichnung">
      <mat-icon svgIcon="file"></mat-icon>
      Hello! This is a longer text to see if overflow ellipsis effect will get
      applied!
    </div>

    //here is some more stuff of course, but this is the relevant code
</div>

CSS

.row {
  & span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
}

.kurzbezeichnung {
  width: 150px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
   white-space: nowrap;
}

.row {
  display: flex;
  flex-direction: row;
  gap: 18px;
  width: 100%;
}