Можно ли использовать flex-wrap, а также добавить эллипсы, чтобы указать, что элементы обернуты? - PullRequest
Новая
       41

Можно ли использовать flex-wrap, а также добавить эллипсы, чтобы указать, что элементы обернуты?

0 голосов
/ 13 февраля 2020

Примерно так: представьте, что третий элемент обернут и мы показываем для него эллипсы

Если это элементы: 

.container { 
  height: 50px; 
  background-color: grey;
  display: flex;
  flex-wrap:wrap;
}

.item {
  text-overflow: clip;
  height: 50px;
  background-color: pink;
  margin: 0px 5px 10px 5px;
}

.item.injected {
  flex:1;
  text-align: right;
  background-color: red;
  margin: 0px 5px 10px 5px;
}
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div> 
  <div class="item injected">Info 4</div>
</div>

Но мы хотим, чтобы при переносе последний элемент не переносился.

1 Ответ

0 голосов
/ 13 февраля 2020

Flex-wrap и эллипсы в CSS - это разные вещи.

Да, вы можете использовать и flex-wrap, и эллипсы в CSS.

" Flex-wrap " используется для указания того, следует ли сгибать элементы в одну строку или переносить на несколько строк. Свойство flex-wrap позволяет включить направление управления, в котором располагаются линии. Он используется для обозначения однострочного или многострочного формата для сгибания элементов внутри гибкого контейнера.

" ellipses " отображается внутри области содержимого, уменьшая объем отображаемого текста.

Я создал пример, с которым можно связаться, нажав на ссылку ниже:

examplehttps://jsfiddle.net/zuqf6v8k/1/

...