移动端视图无需额外标记仅展示图标不展示文本的实现方法

方案1：复用通用类名，仅新增2个span（无冗余类） #

你原有思路中无需给4个文本单独设置不同类名，所有需要在移动端隐藏的文本统一复用同一个类名即可，仅需新增2个span标签，结构更简洁：

<!-- 上一页按钮组 -->
<router-link v-if="myprevLink" :to="'/' + myprevLink">
  <i class="fas fa-angle-double-left"></i> <span class="pagination-text">Previous</span>
</router-link>
<span class="disabled" v-else>
  <i class="fas fa-angle-double-left"></i> <span class="pagination-text">Previous</span>
</span>

<!-- 下一页按钮组 -->
<router-link v-if="mynextLink" :to="'/' + mynextLink">
  <span class="pagination-text">Next</span> <i class="fas fa-angle-double-right"></i>
</router-link>
<span class="disabled" v-else>
  <span class="pagination-text">Next</span> <i class="fas fa-angle-double-right"></i>
</span>

对应的媒体查询CSS代码（以767px为移动端断点为例）：

@media (max-width: 767px) {
  .pagination-text {
    display: none;
  }
}

该方案逻辑清晰，后续需要调整文本样式仅需修改.pagination-text一个类的配置即可。

方案2：零额外标签，纯CSS实现（无需新增span） #

如果不想改动原有HTML的嵌套结构，可以仅给按钮父元素添加同一个通用类，通过字号控制实现文本隐藏，图标不受影响：

<!-- 上一页按钮组 -->
<router-link v-if="myprevLink" :to="'/' + myprevLink" class="pagination-btn">
  <i class="fas fa-angle-double-left"></i> Previous
</router-link>
<span class="disabled pagination-btn" v-else>
  <i class="fas fa-angle-double-left"></i> Previous
</span>

<!-- 下一页按钮组 -->
<router-link v-if="mynextLink" :to="'/' + mynextLink" class="pagination-btn">
  Next <i class="fas fa-angle-double-right"></i>
</router-link>
<span class="disabled pagination-btn" v-else>
  Next <i class="fas fa-angle-double-right"></i>
</span>

对应的CSS代码：

@media (max-width: 767px) {
  .pagination-btn {
    font-size: 0; /* 将普通文本字号设为0实现隐藏 */
  }
  .pagination-btn .fas {
    font-size: 16px; /* 单独恢复图标字号，可根据设计需求调整数值 */
  }
}

注意：你之前贴的示例代码中，禁用状态的下一页按钮文本误写为了Previous，实际应为Next，调整时请修正该笔误。

内容的提问来源于stack exchange，提问作者user16532586