Это будет «быстропост» прикладного характера. В нем будет больше кода, чем текста, но надеюсь он вам будет полезен.
Итак, задача: у нас есть список новостей из десяти пунктов с заголовком и вступительным текстом и нам нужно отдавать мобильным устройствам этот список в урезанном виде из пяти пунктов с укороченными заголовками и вступительным текстом в одну строку, и еще, чтобы пользователь видел «…» в конце урезанного текста, при этом на мобильное устройство приходит тот же текст что и на десктоп. Можно использовать JavaScript, но зачем, если есть CSS3?
Нам помогут CSS3 свойства text-overflow (ссылка на спецификацию) и поистине чудесное свойство :nth-child() (здесь все подробно и на примерах). Большинство современных мобильных устройств имеют браузеры с поддержкой этих свойств.
Теперь практика.
На входе мы имеем вот такой список новостей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul class="news-list">
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
<li><a href="#" class="news-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><span class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla felis, dignissim sit amet rutrum eget, ultricies dictum tortor. Donec erat ligula, interdum a feugiat eu, pretium ac dui. Aliquam non mi vel massa sodales venenatis.</span>
</li>
</ul> |
И картинка, можно кликнуть, чтобы увеличить:
Так мы будем отдавать его для десктопных устройств.
А теперь подготовим версию для мобильных устройств согласно сценарию:
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .news-list li { padding: 0 0 1rem; } .news-list li:nth-child(n+6) { display: none; } .news-title { display: block; width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .teaser { display: block; width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
В результате мы получим список новостей нужного нам вида:
Естественo, не забываем обернуть эти правила в нужное условие с помощью Media Queries Вот и все. Как я и говорил, коротко и по делу. Надеюсь вам это будет полезно.