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

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

[@AleksanderLamkov]

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

[@VasjaG]

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

[@AleksanderLamkov]

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

[@VasjaG]

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

[@AleksanderLamkov]

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

[@nikolaydd6219]

Плохая идея.

[@AleksanderLamkov]

Почему же?

[@dirkdiggler4714]

@@AleksanderLamkov Проблема с сафари почему то..

[@user-ef4bs6zq5g]

Сафари все работает. Спасибо большое🎉

[@eldarmammadov9917]

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

[@AleksanderLamkov]

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

[@eldarmammadov9917]

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

[@Gor0d]

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

[@chessprom9236]

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

[@Verdgini]

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

[@flowcsgo804]

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

[@AleksanderLamkov]

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

[@maxfatyanov7096]

Это база

[@kacetal]

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

[@AleksanderLamkov]

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

[@kacetal]

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

[@almannazyrov394]

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

[@Seraf_]

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

[@AleksanderLamkov]

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

[@placid3495]

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