У меня есть кнопка, которая масштабируется с шириной страницы. Когда он становится слишком маленьким, текст обертывается и, таким образом, становится нечитаемым. Я хочу, чтобы кнопка переключалась с «Post Thread» на «Post», а затем на знак «+». Самый простой способ сделать это, желательно с помощью только 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>