line-clamp

В этой статье рассказывается про то, как можно обрезать текст, указав, сколько строк должно отображаться.

Пример:
.line\-clamp { display: \-webkit\-box; \-webkit\-line\-clamp: 3; \-webkit\-box\-orient: vertical; overflow: hidden; }

? @frontendInterview

CSS Функция local() экономит трафик пользователя

При оптимизации скорости загрузки страницы, кроме изображений, ещё значительным пунктом являются шрифты. Поскольку они весят много. И каково было моё удивление, когда я узнал о существовании функции local().

В чём суть. С помощью функции мы можем проверить, установлен ли нестандартный шрифт на устройстве пользователя. Если установлен, то не загружать его по сети. Для этого её нужно использовать при объявлении правила @font-face. Например, я подключаю шрифт Cherry Bomb One.

```
@font-face {
font-family: 'Cherry Bomb One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("CherryBombOne Regular"),
local("CherryBombOne-Regular"),
url("CherryBombOne-Regular.woff2") format('woff2');
}

```

В этом случае браузеры загрузят его только когда шрифт CherryBombOne Regular не установлен на устройстве пользователя. Очень простой трюк, но суперполезный.

? @frontendInterview