css - 溢出时更改按钮文本？

Question

我有一个随页面宽度缩放的按钮。当它变得太小时，文本会换行，因此变得不可读。我希望按钮从“Post Thread”变为“Post”，然后变成一个 + 号。执行此操作的最简单方法是什么，最好只使用 CSS 和 HTML，但也可以使用其他语言。

Answer 1

您可以为每个文本创建两个单独的容器，一个用于大分辨率，一个用于小分辨率。

然后使用媒体查询来显示/隐藏它们，如下所示:

/* Hide when larger than 768px */     
@media (min-width: 768px) {
    .visible-sm { display: none; }
}

/* Hide when smaller than 768px */    
@media (max-width: 768px) {
    .visible-lg { display: none; }
}

<a class="button" href="#">
    <span class="visible-lg">Post Thread</span>
    <span class="visible-sm">+ Post</span>
</a>