jquery - What is standard practice for truncating text for narrow screen widths? -
a simple example: let's in footer of website @ 1024px, along other links, have "terms & conditions" link. using media queries, @ max-width: 320px
want shorten link read "terms". approach 2 ways:
jquery approach
html
<p class='terms'>terms & conditions</p>
jquery
// use match media or similar determine breakpoint use function: $('.terms').text('terms');
css approach
html
<p class='terms'>terms <span>& conditions</span></p>
css
@media screen , (max-width: 320px) { .terms span { display: none; } }
is there standard practice this? seem me css method efficient.
if not use jquery anywhere else on website, should go css solution. if use jquery, however, both approaches equally effective - users not notice difference.
Comments
Post a Comment