溢出时更改按钮文本？

Question

我有一个按页面宽度缩放的按钮。当它变得太小时，文本会包装，从而变得不可读。我希望按钮来自＆＃34; Post Thread＆＃34;到＆＃34;发布＆＃34;然后只是一个+号。最简单的方法是什么，最好只使用CSS和HTML，但其他语言是可以接受的。

Answer 1

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

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

＆＃13;

＆＃13;

/* 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; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;