如何扩大缩短p标签文本取决于未来p标签？

Question

我有一个排，宽度400像素，这包含两个p标签。一个是公司的名称，另一个是位置的名称。这p标签使用text-overflow: ellipsis;和min-width缩短。这是工作的罚款。

我的问题是：

1. 如果2 p标签文字太长，那么2个标签宽度必须相同
2. 如果第一个标签名称过长和第2标签是短暂的，这些文字和第1标签，然后第二个标签取宽度取最大宽度。

.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

你说你想为这两个要素相同的行为，所以我会建议只定义一个类。我加了红色边框，所以你可以很容易地看到元素的宽度。添加宽度：汽车和显示：内联块告诉元件一样宽，因为它的内容，直到最大宽度。您现在可以玩的最大宽度。

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