Обрезаем длинную строку


Содержание
Илон Маск рекомендует:  Что такое код getmaxx

Как обрезать элемент на CSS (свойства overflow, text-overflow и clip)

По умолчанию если в заданные размеры содержимое блока не помещается, то оно отображается поверх него.

CSS свойство overflow

Для предотвращения переполнения у блочных элементов применяется свойство overflow (overflow-x управляет горизонтальной прокруткой, overflow-y — вертикальной). Оно бесполезно для таких HTML элементов как textarea и input.

overflow и position: absolute;

Элемент с position: absolute; перемещается в рамках другого элемента с position, отличного от static. То есть родитель с overflow: h > ▼ hidden r a r s a r s f

Полоса прокрутки (scrollbar) и position: fixed;

Полоса прокрутки, принадлежащая тегу html, не перекрывается элементом с position: fixed. Это является проблемой для модального окна, распахнутом на весь экран. Решение просто как две копейки: нужно убрать прокрутку у html и добавить при необходимости прокрутку у body.

CSS свойство text-overflow: закончить многоточием

При overflow не в значении visible текст становится не читаемым, обрезаясь на полуслове. Особенно, если его перенос на другую строку запрещён благодаря white-space в значении nowrap. В этом случае можно обозначить, что часть слов убрана и повествование не закончено, воспользовавшись свойством text-overflow.

CSS свойство clip

Только для элементов, которым задан position: absolute;. Единицы измерения можно выбрать px, em и т.п., но не проценты.

6 комментариев:

ololo Отлично! таких примеров нигде еще не встречал. не нужно в блокнот для каждого свойства лесть! NMitra Я к этому варианту пришла через тернистый путь проб и ошибок. Сама без «Шпаргалки» уже не могу — это мой блокнот. ))) Правда всё ещё она не в том состоянии, в котором я её вижу в конечном итоге. Дмитрий Емцов А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй. NMitra Пока это невозможно. Что-то подобное я видела в «черновиках», но на практике нет поддержки браузерами. Евгений Гринец А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй.

some_class:
| First line,
| second line
| and more

.soome_class <
font-size: 1em;
height: 2em;
overflow: hidden;
>
NMitra Установите height, равную высоте двух строк. height двух строк = line-height * 2

Обрезаем длинную строку

Если кто не в знает, что добавление и переполнения многоточия к текстовому элементу не является эффективным содержанием. Однако все же имеет смысл использовать эту технику для некоторых элементов пользовательского интерфейса. Независимо от того, разумно ли применять эту технику к вашему контенту, это зависит от вас. Самый простой и более пуленепробиваемый способ обработки много строчного усечения строк, поэтому я обнаружил, что мы можем обрезать строку, используя два тщательно размещенных псевдо-элемента CSS.

Много раз текст может действительно разрушить дизайн вашего сайта, особенно когда нет способа узнать, сколько текста может содержать каждый элемент. Вы могли бы создать свой сайт, чтобы выглядеть хорошо всего несколькими строками текста, но намного позже отображается весь. Способ исправить это — добавление css в элемент, который ограничит видимость текста после определенной точки. Визуально привлекательный способ сделать это — вырезать текст в определенной точке и добавить многоточие.

Если вы заметили, последний эффект отлично подходит для добавления многоточия в отдельные строки текста, но текст не будет разбиваться на несколько строк из-за строки. Это заставляет текст оставаться на одной линии независимо от того, как долго это происходит. Чтобы исправить это и показать несколько строк текста перед добавлением многоточия, мы должны использовать следующий класс.

Приступаем к установке:

Здесь будет находится знаки или большая статья

.text-rings-responsively <
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 2.5em;
text-align: justify !important;
padding-right: 39px;
padding-left: 1em;
>

.text-rings-responsively:before <
content: »;
position: absolute;
right: 19px;
bottom: 0;
>

.text-rings-responsively:after <
content: »;
position: absolute;
right: 19px;
width: 2em;
height: 2em;
margin-top: 0.3em;
background: white;
>

Как это работает:

Представим себе, что нам нужно содержать блок текста до максимум 3 строк. Чтобы сделать это, мы должны обрабатывать следующие случаи:

1. Текст более 3 строк;

2. Текст меньше 3 строк;


3. Текст ровно 3 строки;

1. Чистый CSS;
2. Отзывчивый;
3. Нет необходимости пересчитывать при изменении размера или события загрузки шрифта;
4. Кросс-браузер;

Также не забываем, что при установки, что то может быть не корректно, а это показатся нижнее строка, все насттраевается в CSS, где сами можете выстроить конфигурацию, как кам нужно, или чтоб удобно было. Но и не забываем про многоточие, что с стилях отвечает content: »; — как видим сейчас в нем все точни убраны, что можно установить, если хотите, чтоб они были, а также можно одну прописать, так как срез идет на пробеле, что возможно будет по теме точка выставлена.

Заметка: Для эффекта эллипса требуется webkit, а это означает, если кто-то просмотрит его с помощью браузера, который не поддерживает webkit, тогда они не будут видеть многоточие «. » но текст по-прежнему будет отрезан в правильной точке, поэтому этот эффект по-прежнему будет работать во всех основных браузерах.

Точки со стиля были убраны, то нем сейчас многоточие, кому нужно поставить, сейчас работает при таком раскладе, просто останавливается на пробеле. Так, чтоб строка была полной по ширине, чтоб смотрелось корректно.

Обрезка текста с многоточием css

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

Все гениальное — просто! Для себя я запомнил это, как правило «wsoto» как аббревиатура стилей. Может быть и не очевидно, зато запоминается =)

Для чего это нужно?

Например, есть блок в который попадают пользовательские данные: заголовки страниц, отрывки комментариев и т.д. Однажды, пользователь-злодей введет непрерывную строку типа: «фывфывфывфвфывфывфывфывфывфывфвыфывфывфывфыв», которая обязательно сломает вашу верстку. Обидно — один мелкий, ничтожный человечишка сломал результат ваших ночных стараний.

Чтобы этого не произошло, добавляем правило wsoto и наслаждаемся.

Обрезка одно-, или многострочного текста по высоте с добавлением многоточия

Есть текст произвольной длины, который нужно вывести внутри блока фиксированной высоты и ширины. При этом, если текст помещается не полностью, отображаться должен фрагмент текста, который полностью помещается в заданный блок, после чего устанавливается многоточие.

Такая задача является довольно распространенной, в то же время она есть не такой тривиальной, как кажется.

Вариант для однострочного текста на CSS

В этом случае можно использовать свойство text-overflow: ellipsis . При этом контейнер должен иметь свойство overflow равное hidden или clip

Вариант для многострочного текста на CSS

Первый способ обрезать многострочный текст с использованием CSS свойств применить псевдо-элементы :before и :after. Для начала HTML-разметка

А теперь и сами свойства

Еще один способ — использовать свойство column-width с помощью которого задаем ширину колонки для многострочного текста. Правда, при использовании этого способа установить в конце многоточие неполучится. HTML:

Третий способ решение для многострочного текста на CSS есть для браузеров Webkit. В нем нам прийдется использовать сразу несколько специфичных свойств с префиксом -webkit. Основным является -webkit-line-clamp которое позволяет указать количество выводимых в блоке строк. Решение красивое но довольно ограниченное за счет своей работы в ограниченной группе браузеров

Вариант для многострочного текста на JavaScript

Тут используется дополнительный невидимый блок, в который изначально помещается наш текст, после чего , удаляется по одному символу, пока высота этого блока не станет меньше либо равной высоте нужного блока. И в конце текст перемещается в исходный блок.

Это же в виде плагина для jQuery:

Как итог — желательно для обрезания произвольного текста использовать решения на CSS, поскольку они и быстрее, и стабильнее. Что касается решений на JavaScript, нужно помнить, что операции с DOM’ом: вставка элемента, удаление, изменение его содержимого — являются очень тяжелыми. Поэтому с такими хаками нельзя усердствовать.

Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

✂️ Обрезаем длинную строку и добавляем троеточие…


  • Вещает nickdeny
  • Опубликовано: 13/10/2020
  • Изменено: 13/10/2020

В современном мире существуют тысячи устройств с различными размерами экранов и их пропорциями: от мелких смартфонов до огромных широкоформатных мониторов. Для приятного использования веб-сайта он должен быть максимально адаптивным под каждый из экранов. И для этого очень часто нужно обрезать текст в одну или несколько строк.

Теория

Вся функциональность сниппета завязана, в основном, на свойстве overflow: hidden : мы визуально обрезаем текст, а дальше работает с видимой частью. При необходимости мы можем отобразить остальную часть текста. (например, при :hover)

Однострочный текст

Этот тип обрезания текста в одну строку полезен, например, для вывода заголовков либо названий товаров. И это делается довольно просто:

Многострочный текст

А этот тип полезен при выводе превью товара, статьи и тп. В коде ниже – полноценная поддержка, с троеточием, есть только у браузеров, которые поддерживают движок WebKit. Для других браузер существует заглушка, которая обрезает строки согласно line-height и max-height . Эта реализация уже посложнее:

Примеры

Пример реализации обрезания текста в одну и несколько строк:

Также подписывайтесь на наш офигенный Телеграм-канал ��: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!

Как обрезать текст только после двух первых строк?

Как обрезать текст только после двух первых строк, при этом ширина блока содержащего текст растягивается в зависимости от размера экрана. И если первые две строки не умещаются по высоте то блок растягивается также и по высоте пока полностью не уместит эти 2 строки. Как такое реализовать?

2 ответа 2

P.S.

Если ты хочешь иметь однострочный текст, который заканчивается «. «, то надо сделать так: https://jsfiddle.net/g0h10ede/

P.P.S.

залез на исходник приведённого тобой сайта и там не увидел вообще каких-то свойств css, направленных на обрезание текста — скорее всего он режется на уровне скриптов (например, с использованием javascript) или на сервере

Предыдущий вариант работает только в вебките.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35399

Обрезание строк с помощью функций PHP


В этой статье мы рассмотрим несколько различных способов в PHP обрезать строку на определенное количество слов и символов. Большая часть функций, описанных в этой статье, используется, чтобы продемонстрировать возможности PHP для работы со строками.

Илон Маск рекомендует:  Псевдокласс focus-within в CSS

Во всех наших примерах мы будем использовать следующую строку, и будем исходить из того, что нам нужно уменьшить количество символов в строке со 187 до 120 символов ( для Twitter) .

В нашем примере мы также используем вторую строку из 55 символов, чтобы вы могли проверить возвращаемый результат на более короткой строке.

mb_strimwidth()

mb_strimwidth() возвращает в PHP обрезанную строку по длине и добавляет конечные символы, указанные в функции. Так как это одна из основных функций PHP , ее мы рассмотрим в первую очередь. Применяется она очень просто:

Функция рассматривает свободное пространство как символ. Но это значит, что между последним усеченным символом и конечным символом многоточием будет размещаться пробел. Вы можете обрезать строку без конечного символа, а затем добавить его отдельно. Посмотрите на следующий пример:

Приведенный выше код добавляет многоточие не зависимо от того, была ли PHP обрезана строка до символа или нет. Чтобы исправить это, мы будем рассчитывать длину строки, и только после этого добавлять многоточие, если исходная строка действительно должна обрезаться. Например:

При отправке сообщений в Twitter и на другие ресурсы, где символы чувствительны к регистру, каждый символ имеет значение… и эта функция в ряде случаев сэкономит вам один пробел!

mb_substr()

Функция PHP mb_substr() « получает часть строки «. Она возвращает подстроку на основе количества символов. Позиция обрезки отсчитывается от начала строки. Позиция первого символа равна 0 . Позиция второго символа равна 1 . И так далее.

Чтобы добавить многоточие ( или любой другой конечный символ ), мы можем изменить первую функцию, которую рассматривали. Мы обрезаем строку перед добавлением $trimmarker , чтобы гарантировать, что у нас не будет добавляться в PHP обрезанной строке с конца лишний пробел.

mb_substr(), substr() и mb_strcut()

mb_substr() , substr() и mb_strcut() — еще несколько функций, похожих на те, которые я описал выше. Они отличаются только тем, как обрабатываются многобайтовые наборы символов ( китайский язык и т.д. ).

Если вы выводите PHP обрезанную часть строки до ближайшего слова на основе количества символов ( но без конечного многоточия ), используйте следующий код:

preg_match()

Вы редко найдете тех, кто предпочитает использовать регулярные выражения, когда есть так много отличных функций PHP . Тем не менее, вот функция, которая обрезает строку до определенного символа в PHP , исходя из заданного количества знаков от начала. В отличие от других функций, описанных выше, эта функция обрезает строку до целого слова.

Описание функции

Функция принимает три параметра: $string , $length и $trimmarker ( многоточие или другие символы, которые добавляются в конце строки ).

Строка 7

Первое, что мы делаем, это проверяем длину PHP обрезанной строки после символа. Если строка короче, чем $length , то мы возвращаем эту строку.

Строка 9

Функция mb_substr() прерывает строку в $length , если это количество символов не содержит окончания слова ( пробела ). Если мы передали строку длиною 500 символов и эта строка не содержит пробелов, то будет возвращена вся строка ( так как функция preg_match не нашла окончания слова ). На данный момент мы обрезаем строку таким образом, и возвращаем ее полностью.

Строки 10, 11, и 12

Если длина нашей строки превышает максимальную длину, определенную в качестве параметра функции, мы выполняем регулярное выражение функции preg_match() , чтобы вернуть часть строки до символа с номером $length , который определяется как конец слова ( ‘/^.<1,$length>b/s’ ). Знак периода означает любой символ, кроме символа новой строки ( n ). Фигурная скобка определяет диапазон, который задает, сколько символов должен PHP обрезать в строке. Таким образом <1,$length>означает от 1 до символа $length . Наконец, b означает, что шаблон будет соответствовать окончанию слова. Мы можем производить поиск только слов целиком по шаблону, который мы предоставили. И в конце s задает поиск всех пробелов.

Так как мы не хотим, чтобы возвращаемая строка превышала длину $length , максимальное количество символов в функции preg_match должно быть равно максимальной длине минус длина $trimmarke.r . Мы должны учитывать это.

Затем мы возвращаем либо усеченную строку, либо исходную строку, если она меньше заданной длины усечения.

strrpos()

Функция strrpos() находит позицию последнего вхождения подстроки в строке. Она возвращает позицию, на которой располагается искомая подстрока относительно начала строки. Отметим также, что первая позиция в строке имеет номер 0 — а не 1 , поэтому мы учитываем это в функции, добавляя 1 к длине строки при применении функции strrpos() .


wordwrap()

Использование wordwrap() — это еще один способ, с помощью которого можно в PHP обрезать строку до пробела, хотя он не очень эффективен и не является лучшим выбором (если только обстоятельства не требуют этого). Wordwrap оборачивает строку в заданное число символов с использованием символа разрыва строки. Применив функцию PHP explode() , мы можем построить массив из каждой строки текста. Мы определяем, нужен ли $trimmarker ( конечное многоточие ), запросив, пусто ли второе значение массива. Если пусто, то строка не оборачивается.

Определение для параметра cut значения true означает, что строка всегда оборачивается до или на указанном символе.

str-split()

Функция str-split() может быть использована в приведенной выше функции для преобразования строки в массив. str-split () не разбивает строку до целого слова. С ее помощью PHP обрезает последний символ в строке ровно до 120 знаков.

Усечение по заданному количеству слов

Ниже приведен пример PHP обрезки строки по количеству символов, пробелов или слов. Это не слишком отличается от того, что мы уже делали. Затем мы сводим скорректированный массив в строку символов, максимальное количество которых задается $limit . Мы добавляем $trimmarker (…) , если наш $limit меньше, чем количество слов в массиве.

strtok()

Совместно применив strtok() и wordwrap() мы можем создать короткую, но эффективную функцию, которая будет в PHP обрезать строку до нужной длины. Как показано ниже, она не будет учитывать при усечении $length +$trimmarker . Но это удобно, если вы не слишком заботитесь о длине возвращаемой строки.

Обрезка слов в WordPress

Для возврата обрезанного слова в WordPress используется wp_trim_words . Данная функция часто применяется в сочетании с wp_strip_all_tags для очистки текста до его обработки. Конечно, есть и другие функции, которые служат для той же цели.

Заключение

Мы могли бы написать еще сотни примеров PHP обрезки строк, но когда-то нужно остановиться. Функции, приведенные в этой статье, являются частью ядра PHP , и вы можете использовать их для усечения строк. Хотя чаще всего программисты стараются избегать регулярных выражений, если другого выхода нет, вы можете прибегнуть и к их помощи.

В ряде примеров мы вернули $trimmarker, представляющий собой многоточие. При необходимости вы можете вернуть HTML-объект Ellipsis , для этого используется код …. Но лично я предпочитаю многоточие.

Скачать примеры

Скачать примеры из этой статьи вы можете здесь .

Данная публикация представляет собой перевод статьи « Truncate (Shorten) Strings to the Nearest Whole Word or Character Count with Trailing Dots using PHP Functions » , подготовленной дружной командой проекта Интернет-технологии.ру

Обрезаем длинную строку

Зачастую обрезание текста надо при выводе списка записей, и вывода их краткого содержимая. Таким образом добиваемся ровности и перфекционизма в блоках, например в виджите вывода новостей на главной.

обрезания текста по высоте css

Решение на CSS для однострочного текста

Для однострочного текста есть красивое и простое решение на CSS. В этом случае можно использовать свойство text-overflow: ellipsis . При этом контейнер должен иметь свойство overflow равное hidden или clip. Пример:

Решения на CSS для многострочного текста

Один из способов обрезки многострочного текста на CSS использует псевдо-элементы :before и :after.

Краткое описание новости

Другое решение на CSS использует свойство column-w >. Оно задает ширину колонки для многостраничного текста. Вы уже, наверное, догадались, как мы будем его использовать? Правильно, мы зададим ширину колонки, равную ширине блока, а текст, который не помещается в блок, будет во второй, скрытой колонке:

Многоточие при таком способе не добавится, но текст не будет резаться посередине строки.

Интересное решение для многострочного текста на CSS есть для браузеров Webkit. Для этого нужно использовать сразу несколько специфичных свойств с префиксом -webkit:

Свойство -webkit-line-clamp ограничивает количество строк, выводимых в блоке. Работает красиво и элегантно, но из-за своей специфичности в реальном проекте, конечно, такой прием не может использоваться.


Решения на JavaScript

В решении на JavaScript используется еще один невидимый блок, в который мы помещаем нужный текст, потом удаляем по одному символу, пока высота этого блока не станет меньше либо равной высоте нужного блока. И в конце текст помещаем обратно в исходный блок.

Этот же способ можно оформить в виде простенького плагина для jQuery:

Теперь вызов функции обрезки текста сведется к вызову метода truncateText:

Что касается решений на JavaScript, нужно помнить, что операции с DOM’ом: вставка элемента, удаление, изменение его содержимого — являются очень тяжелыми. Поэтому с такими хаками нельзя усердствовать.

Заключение

Мы привели несколько решений для обрезания произвольного текста как на CSS, так и на JavaScript. Если поддержка браузеров позволяет, лучше выбрать решение на CSS — оно будет быстрее, стабильнее, меньше. Если нет — можно использовать JavaScript, но важно помнить о производительности и применять функцию обрезки текста только действительно в нужных местах.

Обрезание текста по вертикали или что делать если текст не влез по высоте

Если вам это знакомо то прошу под кат.

Совсем недавно наткнулся на такую вот проблему. Длительное гугление если и давало результат то очень половинчатый. В CSS для горизонтального переполнения текстом существует text-overflow но вот его аналога для такого переполнения по вертикали нету. Многие предлагают использовать nowrap в месте с text-overflow но такой подход не универсален и мало кому подходит. Если у нас в блоке произвольный html код то выхода нет. На некоторых известных сайтах так и писали: «Для этой задачи нету решения, старайтесь чтобы в блок влезало целое количество строк». Кроме того некоторые предлагали использовать JS, что так же было не приемлемо.
Такие ответы меня не устроили и после часа размышления ответ был найден. Сразу оговорюсь, я не очень завязан на старые браузеры IE но при этом важна работа в старых iOS. Решение на самом деле очень простое и возможно не требует всего того текста, что я уже написал, но очень хотелось поделится тем более я не видел, что бы кто то это использовал именно так.
Так вот для решения этой задачи мы возьмём css multicolumn на Хабре уже много статей на эту тему.
Предложим у нас есть html:

Илон Маск рекомендует:  Набор абстракций для работы с окнами

В этом случае наш текст скорее всего будет разрезан по пополам.
Теперь если мы хотим избавиться от этого эффекта нужно добавить некий wrapper (обёртку):

Вот с таким или стилем:

Собственно и всё… те строки которые не уместились перетекут в следующую колонку, а так как у родительского блока стоит overflow: hidden то мы их не увидим. Минусом такого подхода может быть только скорость отработки этого действия браузером, но она всё равно гораздо быстрее суррогатов на JS. Если волнуетесь по поводу поддержки браузерами то она уже очень хорошая: caniuse.com/multicolumn. Вот работающий пример: jsfiddle.net/4Fpq2/9.
Заранее извиняюсь если это оказалось только для меня открытием.

Читают сейчас

Похожие публикации

  • 12 октября 2011 в 12:00

Анимация спрайтов при помощи CSS, JS и Canvas

[Заметка] Кроссбраузерный text-overflow в 7 строках

CSS-Expressions on DOMReady (CSS+JS в одном файле)

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 33

Есть способ вписать текст в блок фиксированной высоты с многоточием при переполнении текста www.mobify.com/blog/multiline-ellipsis-in-pure-css/

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

Я сразу сказал, что содержимое может быть произвольное. В моём случае в блоке были p и ещё некоторые элементы которые не давали этой «чётности». Кроме того я не мог контролировать размер блока — flex-box и в зависимости от ориентации устройства. Ну и даже если вы захотите выставлять размер в em то дизайнер вам скажет — а вот этот текст сделай по больше, и у вас всё поедет. :)
Есть способы избежать этой проблемы, я же привёл решение этой проблемы.

PS с новостями не связан, да и задача хоть и решается при помощи колонок, с ними не связана.


Ну так, содержимое — оно произвольное, но ограниченное определённым количеством строк.
Что внутри ТЕКСТОВОГО блока будет не важно, т.к нормальный текст верстается с помощью line-height а не margin. Кроме того, в этом и суть вёрстки — определить как себя будут вести элементы внутри контейнера и какие они могут быть. И «неожиданных» элементов там просто не должно быть(типа а вот в этом мини-блоке мы х**нём жирнючую надпись на пол-блока), т.к все ожидаемые элементы предусмотрены в дизайне. Как бы будет очень странно если будет неожиданное количество элементов, каждый раз идущие в разнобой по параметрам отступа(обычно заголовок-картинка+подзаголовок-текст-подпись, например в случае статей).

С ориентацией устройства, если мне память не изменяет — можно применять особые правила в css с помощью медиа-запросов. Те же яйца, только в профиль.

По поводу em-ов, ничего не поедет если изначально ориентироваться на размеры шрифта. Кроме того, можно ведь использовать «абсолютные» em-ы, ну и препроцессоры как-бы спасают ситуацию, что не нужно шариться по всему css файлу подправляя значения.

И я не к тому что Ваш вариант плох, я к тому что есть альтернативные пути решения проблемы, и в основном решаются они когда к тексту относятся как к тексту, а не как к контейнерам.

Ваш вариант на самом деле хорош, но применить его можно если вы контролируете контент.
Ну или если вернуться к отступам:
1. Как у p (параграф) сделать отступ при помощи line-height?
2. Заголовок (h1-h3) всегда должен быть в 2,3 и т.д. раз больше обычного текста, а такое бывает крайне редко. Для хорошего отображения шрифтов дизайнеры к примеру периодически требует увеличить или уменьшить шрифт на 1-2 пикселя.
3. Вы видимо пропустили моё замечание про flex-box — у меня вёрстка страницы для iPad, страница по высоте ограничена размером экрана, а сам блок с текстом через flexbox завязан на размер «главного» заголовка. Исходя из желаний дизайнеров мы никогда не сможем согласовать размеры строк, отступов и прочего, чтобы оно билось на цело. Да и красиво иначе не выйдет…

и в основном решаются они когда к тексту относятся как к тексту, а не как к контейнерам.

Именно, если контроллируете. Собственно, любой контент должен быть предусмотрен дизайном, иначе всёравно будут проблемы.

1. Отступ сверху и снизу задаётся с помощью line-height(вообще в целом высота строки. Достаточно указать 110%(или 1.1) например и у нас сверху 5% шрифта отступ и снизу). Отступ слева при помощи text-indent(только для того что бы выделить что начался новый абзац). Отступ слева-справа у всего текста — с помощью отдельного контейнера. Если нужно что бы заголовок отделялся от текста — то это отдельный контейнер для текста.
2. 1-2 px не велика проблема, обычно и не видно будет(если текст не сверх-сжат). Но вообще то, что заголовки требуют разного размера шрифтов — проблема дизайна(на одной странице — разные размеры шрифтов у заголовков). Точечно решается присваиванием классов родительскому контейнеру с ограничением по высоте, т.к по факту это — другой контейнер с другим типом текста. Если заголовки меняются во всех таких контейнерах то просто поправить значение в css(ну и «пересобрать» css-файлик что бы остальные значения подтянулись).
3. Честно — не верстал с flexbox’ом пока, но не вижу никаких проблем- flexbox контроллирует ширину, а обрезание текста происходит из за высоты. Высота известна — это большой заголовок + высота строк. Количество интересующих нас строк тоже известно, как и их высота(line-height). Хотя и могу предположить что в Вашей ситуации иначе было нельзя.

В вебе всё так же. Дизайнер разрабатывает разные варианты поведения у страницы и контента, верстальщик реализует. Если появляется что то «неожиданное» — косяк обоих. Темболее что контроллировать внезапно появляющиеся контейнеры ещё сложнее чем неожиданные элементы в тексте, как раз таки подгон лишних контейнеров и есть вручную приведение страницы к нужному виду, а если верстать текст то будет понятно как он должен выглядеть и себя вести, и заботиться об единожды написанных правилах нужно только тогда, когда появляются элементы ломающие вёрстку(соотвественно чем лучше дизайнер и верстальщик — тем меньше «поломок»).

multicolumn и прочее появились как нативная альтернатива js-костылям, и это правильно. Темболее что мода пошла как раз таки от «классических» верстальщиков текста в каких нить газетах/журналах.

Я не говорю о том что мы контроллируем СКОЛЬКО контента находится в контейнере или как конкретно должен выглядеть каждый находящийся в нём символ. Мы, как верстальщики, всего лишь описываем правила поведения текста в этих контейнерах. Если появилось то, что ломает вёрстку то это косяк двух(ну или даже трёх) человек — дизайнера и верстальщика за то что не предусмотрели(и того кто контент добавил и головой не подумал).

Он может контролировать и высоту, это зависит от того как вы его настроите.

Достаточно указать 110%(или 1.1) например и у нас сверху 5% шрифта отступ и снизу).

Что в итоге (предположим влезло 2 абзаца) приведёт к обрезанию как показано выше.

Но вообще то, что заголовки требуют разного размера шрифтов — проблема дизайна(на одной странице — разные размеры шрифтов у заголовков).

Вы меня видимо не верно поняли — что бы всё легло хорошо, у нас размер line-height заголовка должен на цело делится на line-height самого текста и мне кажется соблюсти это и сделать красиво крайне сложно.

А с тем, что такая ситуация сложилась виноваты все — я согласен. Вопрос только кто согласится пойти на уступки и решить их? :) Но это уже к делу отношения не имеет, в этой заметке я показал как можно вывернуться используя css.

Мы, как верстальщики, всего лишь описываем правила поведения текста в этих контейнерах.

>>> Что в итоге (предположим влезло 2 абзаца) приведёт к обрезанию как показано выше.
Разве что если будут блоки и без заголовка и с заголовком. Иначе — предусматривается в css что блок должен содержать заголовок и 3 строки текста под ним, и пишется такое ограничение — у заголовка вот такая высота строки плюс 3 высоты у текста. И высота исчисляемая, в em-ах и зависит от размеров шрифта. Если меняется сам размер элементов то высота блока переопределяется(больше шрифт — значит и больше блоки. Меньше шрифт — меньше блоки. Нужно другое соотношение — поправь. Не хочешь править — подключи препроцессор и забудь про калькуляцию размеров блока как про страшный сон).

Ну вообщем, не вижу смысла дальше обсуждать — дальше уж нужно писать отдельную статью про расово-верный способ сверстать блок с ограничением по высоте, чего я делать не особо хочу(нет времени). И на самом деле — подходит любой из них, в том числе и с обрезанием текста.

Обрезать длинные строки без разрывов слов с интерполяцией точек

Я пытаюсь обрезать длинную строку до определенного количества символов и интерполировать другую пользовательскую строку в середине (более или менее), чтобы показать, что строка была обрезана. И в то же время я пытаюсь сделать так, чтобы слова не разбивались пополам. Например:

Быстрая, коричневая лиса, перепрыгнула через ленивого пса

Если определено (как параметр функции), чтобы обрезать эту строку до 20 символов, результирующая строка должна выглядеть примерно так:

Быстрый коричневый … ленивый пес

Самая близкая реализация, которую я пришел, была:

Но не только это не работает гладко со строками разной длины, но также не усекается до заданного размера.

Для некоторых строк я получаю дублированные пустые символы (из-за неправильной математики относительно пробелов, используемых sprintf () над $ Append), иногда одна буква удаляется из слова, ближайшего к интерполированной строке, а иногда слово разрывается пополам, когда этого не должно быть.

Приведенная выше строка, например, если используется как:

Быстрый коричневый … поглаживает ленивую собаку

Решение

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

Таким образом, подход, который я бы выбрал вместо этого, заключается в использовании wordwrap() разделить строку на сегменты примерно вдвое меньше общей длины, минус длина строки-разделителя.

Затем объедините первую строку из wordwrap() , разделитель и последняя строка. (Использование explode() разделить wordwrap() вывод в строки).

Обратите внимание на этот вывод, что последний бит ei duo немного короче. Это потому, что последняя строка wordwrap() вернулся не из общей длины. Это можно обойти, если это важно для вас, проверяя strlen() последнего элемента из $segments массив и, если он меньше некоторого порога (скажем, $len / 2 ) разбить элемент массива перед ним на слова explode() и добавьте еще одно слово из этого массива.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL