CSS Усекает текст в родительском элементе flexbox с помощью столбца flex-direction

Как я могу обрезать текст ниже? Минимальная ширина: 0; hack не работает, когда для flex-direction установлено значение column. Так же как и этот отвечать.

.parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class = "parent">
   <img src = "http://placekitten.com/g/200/200" />
  <div class = "text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

html css flexbox alignment

26.03.2019 13:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 450

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Когда вы даете align-items: center, text переполняет parent, а ширина не равна ограниченный, поэтому многоточие не появится.

Если вы удалите align-items: center, это сработает, потому что align-items: stretch используется по умолчанию, но теперь изображение получает растянутый:

.parent {
  border: 1px solid red;
  display: flex;
  /*align-items: center;*/
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class = "parent">
   <img src = "http://placekitten.com/g/200/200" />
  <div class = "text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

Решение

Добавьте width: 100% к text — см. демонстрацию ниже:

.parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

<div class = "parent">
   <img src = "http://placekitten.com/g/200/200" />
  <div class = "text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

The min-width: 0; hack doesn't work when flex-direction is set to column.

Обратите внимание, что в min-width: 0, если для переопределения ширины гибкого элемента, она равна авто в направлении строки (для направления столбец вы используете min-height). См. пример ниже для min-height: 0, используемого в флексбокс столбца:

Изменение размера Flexbox и прокручиваемое переполнение

У меня был усеченный текст, вложенный в столбец flexbox. Я добавил width: 100% к каждому предку в дереве, и это сработало, спасибо!

— 06.02.2022 17:22

26.03.2019 13:21

Замените display: flex; в родительском классе на display: block и добавьте в тег img следующее:

.parent {
  border: 1px solid red;
  display: block;
  align-items: center; 
  width: 300px;
}

img{  
    display:block;
    margin:auto;
}
.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;
}

<div class = "parent">
   <img src = "http://placekitten.com/g/200/200" />
  <div class = "text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

Спасибо! Хотя это тоже работает, я принял ответ kukkuz, потому что он использует flexbox.

— 26.03.2019 13:55

Не беспокойтесь, рад помочь!

— 26.03.2019 13:56

26.03.2019 13:26