Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 33
Думаю плохо, что пользователь не узнает, есть ли там вообще какой-то текст ниже по потоку.
Элегантнее было бы сделать псевдоэлемент с тенью (градиентом) за которым «прячется» остаток строки.
Элегантнее было бы сделать псевдоэлемент с тенью (градиентом) за которым «прячется» остаток строки.
В некоторых случаях это будет лучше, к примеру если у нас список статей но в моём случае ничего лишнего быть не должно по самой логике задачи. Ну и это всё очень сильно на дизайн завязано.
Когда не должно быть ничего лишнего, то все должно обрезаться по кол-во символов или слов (опционально: с добавлением постфикса ввиде '...'), например, на сервере (хотя можно и в браузере). Мне кажется так правильнее было бы.
Я не знаю сколько влезет символов, тем более это не могу сделать на сервере так как определение длины строки как и высоты текста сделать очень трудно, размеры символов зависят даже от настроек сглаживания пользователя.
И ещё раз, в моей конкретной задачи не нужно, что бы пользователь знал о существовании вырезанного текста. Может быть в следующей публикации смогу пояснить эту задачу (но это уже скорее JS чем CSS).
И ещё раз, в моей конкретной задачи не нужно, что бы пользователь знал о существовании вырезанного текста. Может быть в следующей публикации смогу пояснить эту задачу (но это уже скорее JS чем CSS).
Так и должно быть? Firefox 27.0, под линуксом.
Скрытый текст
Есть способ вписать текст в блок фиксированной высоты с многоточием при переполнении текста www.mobify.com/blog/multiline-ellipsis-in-pure-css/
В этом способе более сложная разметка, и многоточие не прилипает к последнему видимому слову, но пользователь, по крайней мере, будет знать, что текст не уместился.
Пример
В этом способе более сложная разметка, и многоточие не прилипает к последнему видимому слову, но пользователь, по крайней мере, будет знать, что текст не уместился.
Это не решает поставленную задачу: codepen.io/anon/pen/mhJDw при таком подходе в блок должно влезать целое количество строк.
Разве не htmlbook.ru/css/overflow-y?
эм, а почему бы не указывать высоту и ширину блоков в em? То же и с бордерами(хотя 1px не особо заметно будет).
И сразу отпадут проблемы с обрезанным на половину текстом. Если высота строки 1.3em а нужно что бы влезало 3 строки то и height делаем равным 3.9. То же и с заголовками и прочим контентом.
А что бы гибко менять дизайн и каждый раз не считать сколько где em люди придумали препроцессоры css.
Имхо, высота/ширина в пикселях для сайтов, которым требуются колонки(обычно это новостные сайты того или иного типа) слишком неудобна, да и на разных экранах читаться будет по разному. В случае с em пользовательское масштабирование решает проблему.
И сразу отпадут проблемы с обрезанным на половину текстом. Если высота строки 1.3em а нужно что бы влезало 3 строки то и height делаем равным 3.9. То же и с заголовками и прочим контентом.
А что бы гибко менять дизайн и каждый раз не считать сколько где em люди придумали препроцессоры css.
Имхо, высота/ширина в пикселях для сайтов, которым требуются колонки(обычно это новостные сайты того или иного типа) слишком неудобна, да и на разных экранах читаться будет по разному. В случае с em пользовательское масштабирование решает проблему.
Я сразу сказал, что содержимое может быть произвольное. В моём случае в блоке были p и ещё некоторые элементы которые не давали этой «чётности». Кроме того я не мог контролировать размер блока — flex-box и в зависимости от ориентации устройства. Ну и даже если вы захотите выставлять размер в em то дизайнер вам скажет — а вот этот текст сделай по больше, и у вас всё поедет. :)
Есть способы избежать этой проблемы, я же привёл решение этой проблемы.
PS с новостями не связан, да и задача хоть и решается при помощи колонок, с ними не связана.
Есть способы избежать этой проблемы, я же привёл решение этой проблемы.
PS с новостями не связан, да и задача хоть и решается при помощи колонок, с ними не связана.
Ну так, содержимое — оно произвольное, но ограниченное определённым количеством строк.
Что внутри ТЕКСТОВОГО блока будет не важно, т.к нормальный текст верстается с помощью line-height а не margin. Кроме того, в этом и суть вёрстки — определить как себя будут вести элементы внутри контейнера и какие они могут быть. И «неожиданных» элементов там просто не должно быть(типа а вот в этом мини-блоке мы х**нём жирнючую надпись на пол-блока), т.к все ожидаемые элементы предусмотрены в дизайне. Как бы будет очень странно если будет неожиданное количество элементов, каждый раз идущие в разнобой по параметрам отступа(обычно заголовок-картинка+подзаголовок-текст-подпись, например в случае статей).
С ориентацией устройства, если мне память не изменяет — можно применять особые правила в css с помощью медиа-запросов. Те же яйца, только в профиль.
По поводу em-ов, ничего не поедет если изначально ориентироваться на размеры шрифта. Кроме того, можно ведь использовать «абсолютные» em-ы, ну и препроцессоры как-бы спасают ситуацию, что не нужно шариться по всему css файлу подправляя значения.
И я не к тому что Ваш вариант плох, я к тому что есть альтернативные пути решения проблемы, и в основном решаются они когда к тексту относятся как к тексту, а не как к контейнерам.
Что внутри ТЕКСТОВОГО блока будет не важно, т.к нормальный текст верстается с помощью line-height а не margin. Кроме того, в этом и суть вёрстки — определить как себя будут вести элементы внутри контейнера и какие они могут быть. И «неожиданных» элементов там просто не должно быть(типа а вот в этом мини-блоке мы х**нём жирнючую надпись на пол-блока), т.к все ожидаемые элементы предусмотрены в дизайне. Как бы будет очень странно если будет неожиданное количество элементов, каждый раз идущие в разнобой по параметрам отступа(обычно заголовок-картинка+подзаголовок-текст-подпись, например в случае статей).
С ориентацией устройства, если мне память не изменяет — можно применять особые правила в css с помощью медиа-запросов. Те же яйца, только в профиль.
По поводу em-ов, ничего не поедет если изначально ориентироваться на размеры шрифта. Кроме того, можно ведь использовать «абсолютные» em-ы, ну и препроцессоры как-бы спасают ситуацию, что не нужно шариться по всему css файлу подправляя значения.
И я не к тому что Ваш вариант плох, я к тому что есть альтернативные пути решения проблемы, и в основном решаются они когда к тексту относятся как к тексту, а не как к контейнерам.
Ваш вариант на самом деле хорош, но применить его можно если вы контролируете контент.
Ну или если вернуться к отступам:
1. Как у p (параграф) сделать отступ при помощи line-height?
2. Заголовок (h1-h3) всегда должен быть в 2,3 и т.д. раз больше обычного текста, а такое бывает крайне редко. Для хорошего отображения шрифтов дизайнеры к примеру периодически требует увеличить или уменьшить шрифт на 1-2 пикселя.
3. Вы видимо пропустили моё замечание про flex-box — у меня вёрстка страницы для iPad, страница по высоте ограничена размером экрана, а сам блок с текстом через flexbox завязан на размер «главного» заголовка. Исходя из желаний дизайнеров мы никогда не сможем согласовать размеры строк, отступов и прочего, чтобы оно билось на цело. Да и красиво иначе не выйдет…
к примеру при вёрстке журнала вы контролируете контент и оформление, и подгоняете каждый раз одно к другому, в вебе всё иначе — выплюнул парсер статей или ещё какого то полу автоматического текста и делай, что хочешь так как для грамотной укладки одного с другим уже ИИ нужен. Именно по этому в вёрстке и приходится оперировать скорее контейнерами, чем текстом. И хочется, что бы этот контейнер был максимально гибким. Собственно если было всё так просто, то в стандарте не появились бы: flexbox, multicolumn, regions и т.д. Ведь если вы контролируете контент то и много-колоночность можно ручками сделать. :)
Ну или если вернуться к отступам:
1. Как у p (параграф) сделать отступ при помощи line-height?
2. Заголовок (h1-h3) всегда должен быть в 2,3 и т.д. раз больше обычного текста, а такое бывает крайне редко. Для хорошего отображения шрифтов дизайнеры к примеру периодически требует увеличить или уменьшить шрифт на 1-2 пикселя.
3. Вы видимо пропустили моё замечание про flex-box — у меня вёрстка страницы для iPad, страница по высоте ограничена размером экрана, а сам блок с текстом через flexbox завязан на размер «главного» заголовка. Исходя из желаний дизайнеров мы никогда не сможем согласовать размеры строк, отступов и прочего, чтобы оно билось на цело. Да и красиво иначе не выйдет…
и в основном решаются они когда к тексту относятся как к тексту, а не как к контейнерам.
к примеру при вёрстке журнала вы контролируете контент и оформление, и подгоняете каждый раз одно к другому, в вебе всё иначе — выплюнул парсер статей или ещё какого то полу автоматического текста и делай, что хочешь так как для грамотной укладки одного с другим уже ИИ нужен. Именно по этому в вёрстке и приходится оперировать скорее контейнерами, чем текстом. И хочется, что бы этот контейнер был максимально гибким. Собственно если было всё так просто, то в стандарте не появились бы: flexbox, multicolumn, regions и т.д. Ведь если вы контролируете контент то и много-колоночность можно ручками сделать. :)
Именно, если контроллируете. Собственно, любой контент должен быть предусмотрен дизайном, иначе всёравно будут проблемы.
1. Отступ сверху и снизу задаётся с помощью line-height(вообще в целом высота строки. Достаточно указать 110%(или 1.1) например и у нас сверху 5% шрифта отступ и снизу). Отступ слева при помощи text-indent(только для того что бы выделить что начался новый абзац). Отступ слева-справа у всего текста — с помощью отдельного контейнера. Если нужно что бы заголовок отделялся от текста — то это отдельный контейнер для текста.
2. 1-2 px не велика проблема, обычно и не видно будет(если текст не сверх-сжат). Но вообще то, что заголовки требуют разного размера шрифтов — проблема дизайна(на одной странице — разные размеры шрифтов у заголовков). Точечно решается присваиванием классов родительскому контейнеру с ограничением по высоте, т.к по факту это — другой контейнер с другим типом текста. Если заголовки меняются во всех таких контейнерах то просто поправить значение в css(ну и «пересобрать» css-файлик что бы остальные значения подтянулись).
3. Честно — не верстал с flexbox'ом пока, но не вижу никаких проблем- flexbox контроллирует ширину, а обрезание текста происходит из за высоты. Высота известна — это большой заголовок + высота строк. Количество интересующих нас строк тоже известно, как и их высота(line-height). Хотя и могу предположить что в Вашей ситуации иначе было нельзя.
В вебе всё так же. Дизайнер разрабатывает разные варианты поведения у страницы и контента, верстальщик реализует. Если появляется что то «неожиданное» — косяк обоих. Темболее что контроллировать внезапно появляющиеся контейнеры ещё сложнее чем неожиданные элементы в тексте, как раз таки подгон лишних контейнеров и есть вручную приведение страницы к нужному виду, а если верстать текст то будет понятно как он должен выглядеть и себя вести, и заботиться об единожды написанных правилах нужно только тогда, когда появляются элементы ломающие вёрстку(соотвественно чем лучше дизайнер и верстальщик — тем меньше «поломок»).
multicolumn и прочее появились как нативная альтернатива js-костылям, и это правильно. Темболее что мода пошла как раз таки от «классических» верстальщиков текста в каких нить газетах/журналах.
Я не говорю о том что мы контроллируем СКОЛЬКО контента находится в контейнере или как конкретно должен выглядеть каждый находящийся в нём символ. Мы, как верстальщики, всего лишь описываем правила поведения текста в этих контейнерах. Если появилось то, что ломает вёрстку то это косяк двух(ну или даже трёх) человек — дизайнера и верстальщика за то что не предусмотрели(и того кто контент добавил и головой не подумал).
1. Отступ сверху и снизу задаётся с помощью line-height(вообще в целом высота строки. Достаточно указать 110%(или 1.1) например и у нас сверху 5% шрифта отступ и снизу). Отступ слева при помощи text-indent(только для того что бы выделить что начался новый абзац). Отступ слева-справа у всего текста — с помощью отдельного контейнера. Если нужно что бы заголовок отделялся от текста — то это отдельный контейнер для текста.
2. 1-2 px не велика проблема, обычно и не видно будет(если текст не сверх-сжат). Но вообще то, что заголовки требуют разного размера шрифтов — проблема дизайна(на одной странице — разные размеры шрифтов у заголовков). Точечно решается присваиванием классов родительскому контейнеру с ограничением по высоте, т.к по факту это — другой контейнер с другим типом текста. Если заголовки меняются во всех таких контейнерах то просто поправить значение в css(ну и «пересобрать» css-файлик что бы остальные значения подтянулись).
3. Честно — не верстал с flexbox'ом пока, но не вижу никаких проблем- flexbox контроллирует ширину, а обрезание текста происходит из за высоты. Высота известна — это большой заголовок + высота строк. Количество интересующих нас строк тоже известно, как и их высота(line-height). Хотя и могу предположить что в Вашей ситуации иначе было нельзя.
В вебе всё так же. Дизайнер разрабатывает разные варианты поведения у страницы и контента, верстальщик реализует. Если появляется что то «неожиданное» — косяк обоих. Темболее что контроллировать внезапно появляющиеся контейнеры ещё сложнее чем неожиданные элементы в тексте, как раз таки подгон лишних контейнеров и есть вручную приведение страницы к нужному виду, а если верстать текст то будет понятно как он должен выглядеть и себя вести, и заботиться об единожды написанных правилах нужно только тогда, когда появляются элементы ломающие вёрстку(соотвественно чем лучше дизайнер и верстальщик — тем меньше «поломок»).
multicolumn и прочее появились как нативная альтернатива js-костылям, и это правильно. Темболее что мода пошла как раз таки от «классических» верстальщиков текста в каких нить газетах/журналах.
Я не говорю о том что мы контроллируем СКОЛЬКО контента находится в контейнере или как конкретно должен выглядеть каждый находящийся в нём символ. Мы, как верстальщики, всего лишь описываем правила поведения текста в этих контейнерах. Если появилось то, что ломает вёрстку то это косяк двух(ну или даже трёх) человек — дизайнера и верстальщика за то что не предусмотрели(и того кто контент добавил и головой не подумал).
flexbox контроллирует ширину
Он может контролировать и высоту, это зависит от того как вы его настроите.
Достаточно указать 110%(или 1.1) например и у нас сверху 5% шрифта отступ и снизу).
Что в итоге (предположим влезло 2 абзаца) приведёт к обрезанию как показано выше.
Но вообще то, что заголовки требуют разного размера шрифтов — проблема дизайна(на одной странице — разные размеры шрифтов у заголовков).
Вы меня видимо не верно поняли — что бы всё легло хорошо, у нас размер line-height заголовка должен на цело делится на line-height самого текста и мне кажется соблюсти это и сделать красиво крайне сложно.
А с тем, что такая ситуация сложилась виноваты все — я согласен. Вопрос только кто согласится пойти на уступки и решить их? :) Но это уже к делу отношения не имеет, в этой заметке я показал как можно вывернуться используя css.
Мы, как верстальщики, всего лишь описываем правила поведения текста в этих контейнерах.
К сожалению мы управляем только статикой, а инструменты для динамики только только начали появляться. (те же регионы)
>>> Что в итоге (предположим влезло 2 абзаца) приведёт к обрезанию как показано выше.
Разве что если будут блоки и без заголовка и с заголовком. Иначе — предусматривается в css что блок должен содержать заголовок и 3 строки текста под ним, и пишется такое ограничение — у заголовка вот такая высота строки плюс 3 высоты у текста. И высота исчисляемая, в em-ах и зависит от размеров шрифта. Если меняется сам размер элементов то высота блока переопределяется(больше шрифт — значит и больше блоки. Меньше шрифт — меньше блоки. Нужно другое соотношение — поправь. Не хочешь править — подключи препроцессор и забудь про калькуляцию размеров блока как про страшный сон).
Ну вообщем, не вижу смысла дальше обсуждать — дальше уж нужно писать отдельную статью про расово-верный способ сверстать блок с ограничением по высоте, чего я делать не особо хочу(нет времени). И на самом деле — подходит любой из них, в том числе и с обрезанием текста.
Разве что если будут блоки и без заголовка и с заголовком. Иначе — предусматривается в css что блок должен содержать заголовок и 3 строки текста под ним, и пишется такое ограничение — у заголовка вот такая высота строки плюс 3 высоты у текста. И высота исчисляемая, в em-ах и зависит от размеров шрифта. Если меняется сам размер элементов то высота блока переопределяется(больше шрифт — значит и больше блоки. Меньше шрифт — меньше блоки. Нужно другое соотношение — поправь. Не хочешь править — подключи препроцессор и забудь про калькуляцию размеров блока как про страшный сон).
Ну вообщем, не вижу смысла дальше обсуждать — дальше уж нужно писать отдельную статью про расово-верный способ сверстать блок с ограничением по высоте, чего я делать не особо хочу(нет времени). И на самом деле — подходит любой из них, в том числе и с обрезанием текста.
>>>И «неожиданных» элементов там просто не должно быть
Это в идеальном мире. В моём мире пользователь в визуальном редакторе вставляет произвольный текст с частичным форматированием из Ворда, и стоит задача корректно обрезать блок текста. :)
Это в идеальном мире. В моём мире пользователь в визуальном редакторе вставляет произвольный текст с частичным форматированием из Ворда, и стоит задача корректно обрезать блок текста. :)
Стреляйте меня, но по моему в разметке после слов «Предложим у нас есть html:» Присутствует лишний
</div>. 
Ладно на вебе, когда вроде как заранее не все предусмотришь из-за разных UA.
Но то, что Вы вынесли на картинке в заголовок, мне так живо напомнило Windows 8, притом как мобильную («ой-йо, почувсвуй себя на вокзале!»), так и настольную-метрошную.
Один из примеров, когда задорный UI мучает людей.
Но то, что Вы вынесли на картинке в заголовок, мне так живо напомнило Windows 8, притом как мобильную («ой-йо, почувсвуй себя на вокзале!»), так и настольную-метрошную.
Один из примеров, когда задорный UI мучает людей.
Все намного проще:
jsfiddle.net/4Fpq2/134/
jsfiddle.net/4Fpq2/134/
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Обрезание текста по вертикали или что делать если текст не влез по высоте