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

Рет қаралды 31,181

Александр Ламков — Friendly Frontend

23 күн бұрын

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

Пікірлер: 25

@AleksanderLamkov 21 күн бұрын

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

@placid3495 21 күн бұрын

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

@Gor0d 19 күн бұрын

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

@chessprom9236 17 күн бұрын

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

@almannazyrov394 20 күн бұрын

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

@Verdgini 20 күн бұрын

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

@kacetal 20 күн бұрын

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

@AleksanderLamkov 20 күн бұрын

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

@kacetal 19 күн бұрын

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

@flowcsgo804 20 күн бұрын

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

@AleksanderLamkov 20 күн бұрын

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

@maxfatyanov7096 17 күн бұрын

Это база

@eldarmammadov9917 17 күн бұрын

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

@AleksanderLamkov 17 күн бұрын

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

@eldarmammadov9917 17 күн бұрын

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

@Seraf_ 20 күн бұрын

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

@AleksanderLamkov 20 күн бұрын

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

@VasjaG 12 күн бұрын

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

@AleksanderLamkov 12 күн бұрын

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

@VasjaG 12 күн бұрын

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

@AleksanderLamkov 12 күн бұрын

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