如何截断 flex 容器中的文本（文本中的属性已被截断）？ [复制]

Question

正如标题所说，这就是问题所在。 （在我查看了有关该主题的所有问题/答案之前，但它们并没有解决我的问题）

我有一个名为 testItem 的模板区域，它是一个 flex 容器，在其中我有一个 h6 元素，它具有 css 属性：overflow: hidden、white-space: nowrap 和 text-overflow: ellipsis 就是这样我应该截断文本但没有截断，这会移动下面的容器（我不想要这个）。

名为testItem 的模板区域的弹性容器继续按其内容（h6 元素）增长，但不会被截断。

我尝试过：将 min-width:0 属性添加到 flex 容器或 flex: 1、flex-grow: 0 但它不起作用。唯一的可能是放max-width: Xpx 但这还不够好，因为如果我有一个大屏幕分辨率的长文本，这个文本分散了其余的容器......

我想以 X 分辨率截断文本，以便容器不会继续为该内容增长，并且其余元素保持固定（但这是响应式的，因此我不能使用固定单位）

注意：如果您需要进一步说明，我可以解决它们：)

注意 2：我附上了一个 CodeSandbox 链接：https://codesandbox.io/s/03o4x2r33n

提前致谢！

附加代码及其执行

.tagsItem {
  grid-area: tags-item;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.testItem {
  grid-area: test-item;
  height: 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.firstDatesItem {
  grid-area: first-dates-item;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.secondDatesItem {
  grid-area: second-dates-item;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.datesItem {
  grid-area: dates-item;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.patientItem {
  grid-area: patient-item;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.endoscopyContainer {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas: "tags-item test-item dates-item patient-item";
  grid-template-columns: 1fr 2fr 3.5fr 3.5fr;
  column-gap: 0.5em;
  justify-items: start;
  align-items: center;
}

.dividerContainer {
  margin-left: 5px;
}

.priorityCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: red;
  text-align: center;
  background: #e5737347;
}

.statusCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: green;
  text-align: center;
}

.applicationTypeCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: blue;
  text-align: center;
  background: #9ecd601f;
}

.testCodeLabel {
  color: grey;
}

.testNameLabel {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="endoscopyContainer">
  <div class="tagsItem">
    <h6 class="priorityCard">Example</h6>
    <h6 class="statusCard">Example2</h6>
    <h6 class="applicationTypeCard">Example3</h6>
  </div>
  <div class="testItem">
    <h6 class="testNameLabel">
      Text that I want to truncate but is still growing its container because of it
    </h6>
    <h6 class="testCodeLabel">12312ASD</h6>
  </div>
  <div class="datesItem">
    Dates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates Example
  </div>
  <div class="patientItem">
    Patient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient ExamplePatient
  </div>
</div>

Answer 1

您可以像这样向 testNameLabel 添加宽度属性：

.testNameLabel {
  width: 15vw;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tagsItem {
  grid-area: "tags-item";
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.testItem {
  grid-area: "test-item";
  height: 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.firstDatesItem {
  grid-area: "first-dates-item";
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.secondDatesItem {
  grid-area: "second-dates-item";
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.datesItem {
  grid-area: "dates-item";
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.patientItem {
  grid-area: "patient-item";
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.endoscopyContainer {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas: '"tags-item test-item dates-item patient-item"';
  grid-template-columns: 1fr 2fr 3.5fr 3.5fr;
  column-gap: 0.5em;
  justify-items: start;
  align-items: center;
}

.dividerContainer {
  margin-left: 5px;
}

.priorityCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: red;
  text-align: center;
  background: #e5737347;
}

.statusCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: green;
  text-align: center;
}

.applicationTypeCard {
  height: 1.8em;
  width: 8em;
  border: 1px solid pink;
  border-radius: 20px;
  color: blue;
  text-align: center;
  background: #9ecd601f;
}

.testCodeLabel {
  color: grey;
}

.testNameLabel {
 width: 15vw;
 font-weight: bold;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="index.css" rel="stylesheet" type="text/css" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="endoscopyContainer">
      <div class="tagsItem">
        <h6 class="priorityCard">Example</h6>
        <h6 class="statusCard">Example2</h6>
        <h6 class="applicationTypeCard">Example3</h6>
      </div>
      <div class="testItem">
        <h6 class="testNameLabel">
          Text that I want to truncate but is still growing its container
          because of it
        </h6>
        <h6 class="testCodeLabel">12312ASD</h6>
      </div>
      <div class="datesItem">
        Dates ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates
        ExampleDates ExampleDates ExampleDates ExampleDates ExampleDates
        ExampleDates Example
      </div>
      <div class="patientItem">
        Patient ExamplePatient ExamplePatient ExamplePatient ExamplePatient
        ExamplePatient ExamplePatient ExamplePatient ExamplePatient
        ExamplePatient ExamplePatient
      </div>
    </div>
  </body>
</html>