如何截断弹性容器中的文本（在文本中包含要截断的文本中的属性）？

Question

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

我有一个名为testItem的模板区域，它是一个伸缩容器，在其中有一个h6元素，它具有css属性：overflow: hidden，{{1} }和white-space: nowrap，所以我应该将文本截断，但不能截断，这会将容器移到下面（我不想要）。

flex容器（其模板区域称为text-overflow: ellipsis会根据其内容（testItem元素）继续增长，但不会被截断。

我尝试过：将h6属性添加到flex容器或min-width:0，flex: 1中，但是它不起作用。唯一可能的方法是放flex-grow: 0，但这还不够好，因为如果我的长文本具有大屏幕分辨率，则该文本会分散其余容器的内容……

我想截断X分辨率的文本，以使容器不再为该内容而增长，并且其余元素保持固定（但这是响应性的，因此我不能使用固定单位）< / strong>

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

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

谢谢！

附加的代码及其执行

max-width: Xpx

.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;
}

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>