时间戳

首页 > 解决方案 > 调整容器大小时使用 HTML 和 CSS 缩写标题

html - 调整容器大小时使用 HTML 和 CSS 缩写标题

问题描述

我正在为一个网站构建一个活动日历，并且我想展示它，如果视口被调整为更小，则日期标题将成为标准缩写。也就是说，“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 的机制应该可以做到，但我不知道怎么做。

先感谢您。

标签： htmlcss

解决方案

您可以使用 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>

推荐阅读