Блог

Я создаю календарь событий для веб-сайта, и я хотел бы представить его таким образом, что если размер окна просмотра будет уменьшен, названия дней станут стандартными сокращениями. То есть ‘Sunday’ стало бы ‘Sun’, а затем просто ‘S’, если бы окно просмотра было уменьшено еще больше.

Один из способов, которым я думал подойти к этому, — определить имена и сокращения как классы следующим образом.

 <div class="day">
    <div class="full">Sunday</div>
    <div class="abbr">Sun</div>
    <div class="init">S</div>
</div>
  

Тогда эти элементы могли бы иметь фиксированную ширину, например, так.

 .day .full
{
    width: 100px;
}

.day .abbr
{
    width: 50px;
}
  

Однако я не знаю, может ли этот подход работать, поскольку я не могу представить, как элементы могут быть скрыты из поля зрения в контейнере или как они могут оставаться в центре контейнера.

Кто-нибудь работал с подобным эффектом без использования Javascript? Мне кажется, что механика CSS, вероятно, должна быть способна это сделать, но я не вижу, как.

Заранее благодарю вас.

Для достижения этой цели вы можете использовать правила CSS @media . В приведенном ниже случае, если ширина видового экрана составляет 600 пикселей, будут применены стили внутри правила. В вашем случае он скроет полное слово и отобразит аббревиатуру.

Вот ссылка на документацию по нему: CSS @media

 .abbr {
  display: none;
}
.init {
  display: none;
}
@media only screen and (max-width: 600px) { 
  .full {
    display: none;
  }
  .abbr {
    display: block;
  }
}  

 <div class="day">
    <div class="full">Sunday</div>
    <div class="abbr">Sun</div>
    <div class="init">S</div>
</div>  

Просто чтобы добавить еще одну возможность, смотрите ниже. Однако предложенный cela вариант более удобен для чтения с экрана (если вы включаете <abbr> элемент в сокращенные версии). Или более популярный (и, как правило, лучший вариант) — просто использовать text-overflow: ellipsis свойство и позволить ему быть гибким. Или другой популярный вариант ux вместо этого.

 @media only screen and (max-width: 767px) {
  div:before {
    content: "S"
  }
}

@media only screen and (min-width: 768px) {
  div:before {
    content: "Sun"
  }
}

@media only screen and (min-width: 992px) {
  div:before {
    content: "Sunday"
  }
}

div { font-size: 5rem }  

 <div>
</div>  

Вы не можете редактировать HTML с помощью CSS (к сожалению), но вы можете добавлять содержимое с помощью pseudo-elements , а затем редактировать их с помощью CSS @media query .

Я добавил 7, spans каждый из которых представляет один день недели, и передал им класс .day , чтобы идентифицировать их в моем CSS. Затем я использовал nth-type-of() селектор и добавил правильные заголовки с помощью content:''; свойства в ::after псевдоэлементе, используя a @media query теперь вы можете редактировать эти заголовки так часто, как захотите.

 span.day:nth-of-type(1)::after {
  content: "Monday";
}

span.day:nth-of-type(2)::after {
  content: "Tuesday";
}

span.day:nth-of-type(3)::after {
  content: "Wednesday";
}

span.day:nth-of-type(4)::after {
  content: "Thirstday";
}

span.day:nth-of-type(5)::after {
  content: "Friday";
}

span.day:nth-of-type(6)::after {
  content: "Satturday";
}

span.day:nth-of-type(7)::after {
  content: "Sunday";
}


@media (max-width: 740px) {
  span.day:nth-of-type(1)::after {
    content: "Mo";
  }

  span.day:nth-of-type(2)::after {
    content: "Tu";
  }

  span.day:nth-of-type(3)::after {
    content: "We";
  }

  span.day:nth-of-type(4)::after {
    content: "Th";
  }

  span.day:nth-of-type(5)::after {
    content: "Fr";
  }

  span.day:nth-of-type(6)::after {
    content: "Sa";
  }

  span.day:nth-of-type(7)::after {
    content: "Su";
  }
}  

 <!-- each representing one day of the week -->

<span class="day"></span>
<span class="day"></span>
<span class="day"></span>
<span class="day"></span>
<span class="day"></span>
<span class="day"></span>
<span class="day"></span>  

Один из способов, которым эту проблему можно решить без @media правил, — разделить названия дней на их компоненты, затем создать контейнер display: flex и применить flex-wrap: wrap с overflow: hidden помощью.

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

 .day {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 200px;
  height: 60px;
  overflow: hidden;
  background-color: #999f;
}

.day>div {
  text-align: center;
  line-height: 1em;
  font-size: 60px;
  background-color: #dddf;
}  

 <div class="day">
  <div>W</div>
  <div>ed</div>
  <div>nesday</div>
</div>