jquery - 针对窄屏幕宽度截断文本的标准做法是什么？

Question

一个简单的例子:假设在我网站的页脚(1024px)以及其他链接中，我有一个“条款和条件”链接。使用媒体查询，在 max-width: 320px 我想缩短链接以简单地阅读“条款”。我可以通过两种方式解决这个问题:

JQUERY 方法

HTML

<p class='terms'>Terms &amp; Conditions</p>

JQUERY

// Use match media or something similar to determine breakpoint then use this function:
$('.terms').text('Terms');

CSS 方法

HTML

<p class='terms'>Terms <span>&amp; Conditions</span></p>

CSS

@media screen and (max-width: 320px) {
  .terms span {
     display: none;
  }
}

这有标准做法吗？在我看来，CSS 方法是最有效的。

Answer 1

如果您不在本网站的其他任何地方使用 jQuery，则应该使用 CSS 解决方案。但是，如果您已经使用 jQuery，则这两种方法同样有效 - 用户不会注意到任何差异。