CSS как показать только 1 строку и скрыть остальные? - PullRequest
Новая
       30

CSS как показать только 1 строку и скрыть остальные?

0 голосов
/ 09 июня 2018

У меня есть навигация вверху моей страницы.В нем у меня есть 5 рыночных акций для 5 разных компаний.Я хочу отобразить 5 на полную ширину, но по мере того как окно становится меньше, я в основном хочу поведение, которое будет обрезать те, которые переполняются, и изменить размер оставшихся, чтобы заполнить навигационный контейнер (так что, скажем, в какой-то момент это толькопоказать 3 акции и скрыть остальные).Вот код прямо сейчас: 

.stocks-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 150px);
  grid-template-rows:1fr;
  grid-auto-rows: 0;
  overflow-y: hidden;
  justify-content: space-between;
  width: 75%;
  font-size: 11px;
  overflow-y: hidden;
}

То, что это делает в настоящее время, - почти то, что мне нужно.Проблема в том, что теперь запасные элементы, которые переполняются и должны в основном создавать новую строку, попадают в верхнюю часть первой строки.Опять же, я не хочу, чтобы они создавали новую строку или были прокручиваемыми.Я просто не хочу, чтобы они показывали вообще.Есть идеи?

1 Ответ

0 голосов
/ 10 июня 2018

Вы можете использовать запросы CSS max-height и @media для достижения этого эффекта:

  • Дайте .stocks-container a max-height, который соответствует высоте одной строки сетки, и объявитеoverflow: hidden

Это гарантирует, что теперь будет когда-либо только одна видимая строка (т. Е. Нет вертикального переноса строк).

  • Теперь добавьте короткий рядмедиа-запросы точки останова сбрасывают grid-template-columns в процентах от ширины области просмотра.

Это позволяет тем сетчатым полям, которые все еще видимы, заполнять всю горизонтальную ширину, зарезервированную для .stocks-container.

Рабочий пример: 

.stocks-container {
display: grid;
grid-template-columns: repeat(5, calc(20% - 6px));
grid-template-rows: 92px;
grid-column-gap: 6px;
grid-row-gap: 6px;
max-height: 92px;
font-size: 11px;
overflow: hidden;
}

.stocks-container div {
height: 80px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}

@media only screen and (max-width: 900px) {

    .stocks-container {
    grid-template-columns: repeat(4, calc(25% - 6px));
    }
}

@media only screen and (max-width: 750px) {

    .stocks-container {
    grid-template-columns: repeat(3, calc(33.33% - 6px));
    }
}

@media only screen and (max-width: 600px) {

    .stocks-container {
    grid-template-columns: repeat(3, calc(50% - 6px));
    }
}
<div class="stocks-container">

<div>
<h2>Company 1</h2>
<p>Company Stock</p>
</div>

<div>
<h2>Company 2</h2>
<p>Company Stock</p>
</div>

<div>
<h2>Company 3</h2>
<p>Company Stock</p>
</div>

<div>
<h2>Company 4</h2>
<p>Company Stock</p>
</div>

<div>
<h2>Company 5</h2>
<p>Company Stock</p>
</div>

</div>
...