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

Question

我正在为一个网站构建一个事件日历，我想展示它，这样如果视口被调整为更小，则日期标题将成为标准缩写也就是说，如果视口进一步缩小，"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的机制应该能够做到这一点，但我不知道如何做到。

提前谢谢。

Answer 1

您可以使用CSS@media规则来实现这一点。在下面的情况下，如果视口宽度为600px，它将应用规则内部的样式。在您的情况下，它将隐藏完整的单词并显示缩写。

这是它的文档链接：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>

Answer 2

只想添加另一种可能性，请参阅下文。然而，所提出的一个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>

Answer 3

您不能通过CSS编辑HTML(不幸的是(，但您可以通过pseudo-elements添加内容，然后通过CSS@media query编辑它们。

我添加了7个spans，每个代表一周中的一天，并将类.day传递给它们，以在CSS中识别它们。然后，我使用了nth-type-of()选择器，并通过::after伪元素中的content:'';属性添加了正确的标题，使用@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>

Answer 4

在没有@media规则的情况下解决此问题的一种方法是将日期名称划分为其组件，然后制作容器display: flex，并将flex-wrap: wrap与overflow: hidden一起应用。

(在下面的例子中，大写和单词其余部分之间的字体紧排是不自然的，因为它们被分隔成divs，但通过额外的样式可以很容易地绕过它们。(

.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>