Как развернуть сокращенный текст тега p зависит от следующего тега p?

Question

У меня есть одна строка шириной 400px, которая содержит два тега p.Один - это название компании, а другой - название должности.Чтобы теги p были сокращены с использованием text-overflow: ellipsis; и min-width.Это работает нормально.

Мой вопрос:

1. Если текст тегов 2 p слишком длинный, ширина 2 тегов должна быть одинаковой
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

Вы говорите, что хотите одинаковое поведение для обоих элементов, поэтому я бы предложил определить только один класс.Я добавил красную рамку, чтобы вы могли легко видеть ширину элементов.При добавлении width: auto и display: inline блок сообщает ширине элемента до его максимальной ширины.Теперь вы можете играть с максимальной шириной.

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