Как я могу скрыть частичные строки в гибком столбце, используя CSS? - PullRequest
Новая
       6

Как я могу скрыть частичные строки в гибком столбце, используя CSS?

1 голос
/ 26 мая 2020

Это было довольно сложно объяснить в названии. У меня есть div, в котором отображается гибкое и гибкое направление столбца, в котором много строк: 

<div class="flex column">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    //etc
</div>

Каждая строка, скажем, 20 пикселей в высоту, а контейнер имеет скрытое переполнение. Если высота контейнера не кратна 20, остается частично видимая строка.

Я бы хотел сделать sh, чтобы CSS автоматически делал высоту строки достаточно высокой, чтобы последняя полу-видимая строка больше не видна, и поэтому новая высота строки в пикселях делится точно на высоту родительского контейнера.

Может ли это быть выполнено sh с чистым CSS?

Другой вариант, который я мог бы принять, - это просто CSS, автоматически скрывающая последнюю строку, которая сейчас частично видна

Вот код проблемы: https://codepen.io/random33443/pen/WNQBQOy

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Вы можете положиться на функцию переноса, и ваш элемент автоматически переместится в другой столбец, который никто не может увидеть.

Измените размер следующего примера и увидите: 

.flex-column {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap; /* this is important */
  height:200px;
  overflow:hidden; /* this one too */
  resize:vertical;
  border:1px solid red;
}
.flex-column *{
  height:25px;
  flex-shrink:0;
  border:2px solid green;
  width:100%; /* and especially this one */
  box-sizing:border-box;
}
<div class="flex-column">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
</div>
0 голосов
/ 26 мая 2020

Если вы оставите контейнер с автоматической высотой, он изменится, чтобы соответствовать тому количеству добавленных строк. Если ваш контейнер имеет фиксированную высоту, вы можете использовать :last-of-type для таргетинга и скрытия последней строки: 

.flex.column{
   display:flex;
   flex-direction: column;
   border: solid 1px #aa2233;
}

.row{
  height: 20px;
  border: solid 1px #333;
  box-sizing:border-box;
}

.sized{
   height: 110px;
   overflow:hidden;
}

.sized .row:last-of-type{
  display:none;
}
<h2>Auto Height</h2>
<div class="flex column">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
</div>

<h2>Fixed Height</h2>
<div class="flex column sized">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
</div>
...