Усеченный текст CSS внутри родительского элемента flexbox со столбцом flex-direction - PullRequest
Новая
       19

Усеченный текст CSS внутри родительского элемента flexbox со столбцом flex-direction

1 голос
/ 26 марта 2019

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

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

Ответы [ 2 ]

1 голос
/ 26 марта 2019

Замените 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>
1 голос
/ 26 марта 2019

Когда вы задаете 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>

минимальная ширина: 0; хак не работает, когда flex-direction установлено в колонка.

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

...