javascript - 如何扩展缩短的 p 标签文本取决于下一个 p 标签？

Question

我有一行宽度为 400 像素，其中包含两个 p 标签。一个是公司名称，一个是职位名称。 p 标签使用 text-overflow: ellipsis; 和 min-width 缩短。这工作正常。

我的问题是:

1. 如果2个p标签文本太长，那么2个标签的宽度需要相同
2. 如果第一个标签名称太长而第二个标签太短，则第二个标签采用该文本的宽度，第一个标签采用最大宽度。

.flex-container-text {
  display: flex;
  width: 400px;
}

.position-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  max-width: 100px
}

.company-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  flex-grow: 3;
  max-width: 100px
}

<div class="flex-container-text">
  <p class="position-name">Position Name Position Name</p>
  <p class="company-name">company Name</p>
</div>

Answer 1

您是说您希望两个元素具有相同的行为，所以我建议只定义一个类。我添加了红色边框，以便您可以轻松查看元素的宽度。添加 width:auto 和 display:inline block 告诉元素与其内容一样宽，直到最大宽度。您现在可以尝试使用最大宽度。

.flex-container-text {
  display: flex;
  width: 400px;
}

.flex-container-text p {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 1;
  overflow:hidden;
  max-width: 150px;
  border:1px solid red;
  width:auto;
  display:inline-block;
}

<div class="flex-container-text">
  <p class="position-name">Position Name Position Name</p>
  <p class="company-name">company Name</p>
</div>