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

Question

一个简单的例子：让我们在我的网站的页脚1024px，以及其他链接，我有一个“条款和条件”链接。使用媒体查询，max-width: 320px我想缩短链接，只需阅读“条款”。我可以这两种方式：

JQUERY APPROACH

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 APPROACH

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，那么这两种方法同样有效 - 用户不会注意到任何差异。

Answer 2

可能有点偏好，但我认为从维护角度来看，CSS解决方案更好。我希望能找到CSS中的表示定义（响应速度最快的设计框架的方向）