Есть ли правильный способ сделать адаптивный текст?

Для этого вы можете использовать медиа-запросы, псевдоклассы и некоторую изобретательность:

a[data-mobiletext] {
    background-color: #FC0;
}
@media screen and (max-width: 700px) {
    a[data-mobiletext] {
        background-color: #CF0;
    }
    a[data-mobiletext] span {
        display: none;
    }
    a[data-mobiletext]:after {
        content: attr(data-mobiletext);
    }
}

<a href="/" data-mobiletext="Read"><span>Read more</span></a>
<a href="/" data-mobiletext="Export"><span>Download PDF</span></a>
<a href="/" data-mobiletext="Tap here"><span>Click here</span></a>

Нажмите «Полная страница», чтобы просмотреть настольную версию.

Есть несколько подходов, которые я использовал, когда клиенты делали похожие запросы (и их не отговаривали*):

1) Используйте Javascript для изменения текста в зависимости от ширины экрана/методов обнаружения устройства;

2) Установите текст по умолчанию в качестве предпочтительного варианта и оберните его в диапазон или аналогичный, используйте текст, который, по вашему мнению, лучше всего подходит для всех устройств (лучше всего подходит для SEO / контента / программ чтения с экрана в зависимости от приоритета), а затем используйте псевдоселекторы, например. :before со свойством content: '' для установки альтернативного текста на основе медиа-запросов. Скрытие диапазона/элемента по умолчанию по мере необходимости.

(*) Я бы посоветовал рассмотреть ваш контент и посмотреть, сможете ли вы найти универсальную метку для этих элементов, но это, вероятно, лучшая практика.