溢出时更改按钮文本？

Question

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

Answer 1

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

然后使用媒体查询 show/hide 它们，像这样：

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

溢出时更改按钮文本？

Change button text when overflow?

html

css

overflow

button