个人中心
gpt4 book ai didi

html - 如何截断 flex 容器中的文本(文本中的属性已被截断)？

转载 作者：行者123 更新时间：2023-11-28 14:23:40 25 4
gpt4 key购买 nike

<分区>

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

我有一个名为 testItem 的模板区域这是一个 flex 容器，在里面我有一个 h6元素，它具有 css 属性:overflow: hidden , white-space: nowrap和 text-overflow: ellipsis所以它所以我应该截断文本但不是，这会移动下面的容器(我不想要这个)。

flex容器，其模板区域称为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>

25 4 0
文章推荐： css - IE7 在 float 元素之间创建空文本注释
文章推荐： javascript - 无法通过 AJAX 将数组发送到 php？
文章推荐： html - 需要将环绕文字添加到我的 div
文章推荐： css - 如何使用 GWT 2.4 对带边框的小部件进行垂直布局？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com