CSS Умная обрезка текста - по ширине и строкам, text-overflow и line-clamp

Подписаться 23 тыс.

Просмотров 32 тыс.

50% 1

🗂️ Смотри бесплатные курсы по фронтенд-разработке на канале:
🟠 Курс по HTML
🔵 Курс по CSS
🟡 Курс по JS
🟢 Курс Accessibility
⚪️ Мастер-класс по верстке для новичков
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS)
💬 Чат в телеграмме (помощь новичкам):
@friendlyFrontendChat
#shorts #frontend #фронтенд #css

Опубликовано:

3 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 25

@AleksanderLamkov Месяц назад

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: @friendlyFrontendChat ℹ Основной канал: @friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

@placid3495 29 дней назад

Спасибо за видео! Каждый шортс в закладки)

@Gor0d 28 дней назад

господи, я длину строки в js получал и через тернарник ставил многоточие 😂😂😂 спасибо!

@chessprom9236 26 дней назад

А я через высоту строки делал 😂😂😂

@almannazyrov394 29 дней назад

Ахринеть, а делал многоточие на html 😂

@Verdgini 29 дней назад

Css-вечная зубрежка. Там этих стилей куча. Чего стоит background color))

@flowcsgo804 29 дней назад

где ты все эти свойства находишь)))

@AleksanderLamkov 29 дней назад

Годы опыта в разработке, повидал всякого 😅

@maxfatyanov7096 26 дней назад

Это база

@kacetal 29 дней назад

Расскажите как это во flex сделать, там помоему всё не так просто.

@AleksanderLamkov 29 дней назад

Так как элементу с обрезаемым текстом нужно менять display на box, то этот элемент не может быть флекс-контейнером, значит обрезаемому тексту требуется доп. обертка. Какие же тут ещё могут возникнуть проблемы?

@kacetal 28 дней назад

@@AleksanderLamkov нет, проблема не с родителем а с флекс детьми, у них не работает overflow, если им не поставить min-width: 0, очередная магия css :)

@Seraf_ 29 дней назад

Во всех браузерах 1 способ будет работать?

@AleksanderLamkov 29 дней назад

Привет! Да, поддержка у каждого свойства из этого набора отличная: caniuse.com/?search=CSS%20line-clamp

@eldarmammadov9917 26 дней назад

А как делать на hover показывал весь текст?

@AleksanderLamkov 26 дней назад

Привет! Что-то вроде .element:hover { overflow: visible}

@eldarmammadov9917 26 дней назад

@@AleksanderLamkov спасибо большое

@VasjaG 21 день назад

В моей практике это решение не заработало как надо

@AleksanderLamkov 21 день назад

В каком-то старом браузере не заработало?

@VasjaG 20 дней назад

@@AleksanderLamkov В новом. Вроде было надо внутри таблицы в сделать максимум три строки текста. Сейчас уже точно не вспомнить. Может ломалось, когда менял масштаб страницы... Просто укоротил текст до ~100 символов и так оказалось стабильнее. Не всегда было именно три строки, но тесты прошли.

@AleksanderLamkov 20 дней назад

Эх, понимаю. С табличными тегами явно работать не будет, т. к. им display менять нельзя (можно, но последствия так себе).