Как обрезать строку внутри дочернего столбца направления flexbox

Question

Я просмотрел статью из csstricks, https://css -tricks.com / flexbox-truncated-text /

Мой вопрос, как заставить это работать, когда .flex-parent имеетflex-direction: column; свойство.

Спасибо за помощь!

Answer 1

На самом деле это просто вопрос перестановки некоторых свойств, но, естественно, этот ответ зависит от потребностей проекта.

Выводы здесь, если вы хотите, чтобы это был столбец, по своей природе каждый элемент верхнего уровняВы включаете в .flex-parent, когда он установлен в направлении столбца, будет отображаться как таковой.Следовательно, справа от него не будет ничего обрезать.

По сути, если вы хотите, чтобы элементы верхнего уровня были столбцом И обрезали содержимое внутри него, то один из способов сделать это - включить их обоих в одну «строку» или .flex-child.Затем в строке вы можете определить свойства выравнивания и выравнивания.

.flex-parent {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 30px 0;
}
.flex-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.long-and-truncated-with-child-corrected {
  flex: 1;
  min-width: 0; /* or some value */
}
.long-and-truncated-with-child-corrected h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.short-and-fixed > div {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: lightgreen;
    display: inline-flex;
}

/*nonessentials*/
body {
  padding: 40px;
}
h2 {
  font-size: 1rem;
  font-weight: normal;
}
.flex-parent {
  background: rgba(0,0,0,0.1);
}

<div class="flex-parent">

  <div class="flex-child long-and-truncated-with-child-corrected">
    <h2>This is a <em>long string</em> that is OK to truncate please and thank you. Some more text to demonstrate, if the string is <b>REALLY</b> truncated</h2>
    <div class="flex-child short-and-fixed">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

</div>