我有一个随页面宽度缩放的按钮。当它变得太小时,文本会自动换行,从而变得不可读。我希望按钮从“发布主题”转到“发布”,然后再到一个+号。最简单的方法是这样做,最好是仅使用CSS和HTML,尽管可以接受其他语言。
最佳答案
您可以为每个文本创建两个单独的容器,一个用于较大的分辨率,一个用于较小的分辨率。
然后使用媒体查询来显示/隐藏它们,如下所示:
/* 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>