Опубликовано автор в категориях Верстальщику.

Это будет «быстропост» прикладного характера. В нем будет больше кода, чем текста, но надеюсь он вам будет полезен.
Итак, задача: у нас есть список новостей из десяти пунктов с заголовком и вступительным текстом и нам нужно отдавать мобильным устройствам этот список в урезанном виде из пяти пунктов с укороченными заголовками и вступительным текстом в одну строку, и еще, чтобы пользователь видел «…» в конце урезанного текста, при этом на мобильное устройство приходит тот же текст что и на десктоп. Можно использовать 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 Вот и все. Как я и говорил, коротко и по делу. Надеюсь вам это будет полезно.

Оставить комментарий

  • (не будет показан)