Перенос целых слов в CSS
Есть блок меню, реализуемый через список. Есть пункт, состоящий из нескольких слов. В адаптивном режиме название пункта не помещается в одну строку, одно из слов переносится на другую строку, причем перенос внутри самого слова. Каким образом можно реализовать перенос по пробелам, причем только в адаптивном режиме? Конкретно: фраза «неправомерное обобщение нехарактерных явлений» переносится как, например: «неправомерное обобщение нехак- (перевод строки) терных явлений». Word-break убирает значок переноса, но не решает проблему. желательно, чтобы переносилось как «неправомерное обобщение (перевод строки) нехарактерных явлений»
Отслеживать
Евгений Кузнецов
задан 4 ноя 2019 в 14:42
Евгений Кузнецов Евгений Кузнецов
11 2 2 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Есть свойство для этого word-break со значением break-all
.wrap
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 Отмена перенос строки в HTML, чтобы убрать лишний пробел
Мой html-код генерится php-скриптом. Если знак препинания обернут в отдельный тег и стоит на следующей строке, то между этим знаком препинания и предшествующим словом появляется нежелательный пробел:
текст1; текст2 ; текст3; текст4; .
Можно ли как-то отменить перенос строки в html-коде и добиться, чтобы у пользователя в браузере текст и знаки препинания отображались без пробелов?
@if ('' != $wmeaning->multi_translation) multi_translation >>; @endif @foreach ($bridge->translationAdditions as $translationAddition) @if (!empty($translationAddition->translation_addition)) translation_addition >> @endif @if (!empty($translationAddition->translation_comment)) translation_comment >> @endif @if (!empty($translationAddition->translation_operand)) translation_operand >> @endif ; @endforeach Отслеживать
задан 8 июн 2016 в 9:36
133 5 5 бронзовых знаков
приведите код, который генерит html. Или попробуйте дополнительно обработать ответ от метода, который генерирует разметку. Что-то типа $html = str_replace(‘\n‘, ‘‘, $obj->genHtml());
8 июн 2016 в 9:53
А какие стили навешаны на класс semicolon ? может там паддинги или марджины или еще чего
8 июн 2016 в 9:57
@АлексейШиманский, не, это ж стандартный пробел между inline элементами
8 июн 2016 в 10:00
А почему у вас в одном случае разметка генерируется с переносом, а в других (выше и ниже примера на картинке) без переноса, хотя ; так же в отдельном теге?
8 июн 2016 в 10:02
Я использую фреймворк Laravel и его шаблонизатор blade. Не уверен, что там можно регулярками убирать эти пробелы. Код из вьюхи ларавела см. в описании к вопросу.
8 июн 2016 в 11:13
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
UPD 3. Стоящей на отдельной строке ; давать другой класс ; , которому назначить margin-left: -10px; . Значение подобрать под размер шрифта.
.container < font-size: 40px; >.semicolon-alone < margin-left: -10px; ) text;
text ; UPD 2. С учётом комментариев к ответу предлагаю ещё три варианта.
1) Узнать, как вставлять более серьёзные куски PHP, собирать строку без лишних пробелов и выводить её целиком. Не работал с Laravel. Нужно нечто в таком духе:
$tmp = ""; if (!empty($translationAddition->translation_addition)) < $tmp .= "" . $translationAddition->translation_addition . ""; > if (!empty($translationAddition->translation_comment)) < $tmp .= "" . $translationAddition->translation_comment . ""; > if (!empty($translationAddition->translation_operand)) < $tmp .= "" . $translationAddition->translation_operand . "'; > $tmp .= ";"; 2) Закрывать комментарии по условию. Будет много, очень много комментариев.
@if ('' != $wmeaning->multi_translation) multi_translation >>; @endif @foreach ($bridge->translationAdditions as $translationAddition) @if (!empty($translationAddition->translation_addition)) translation_addition >>translation_comment)) @if (!empty($translationAddition->translation_addition)) --> @endif translation_comment >>translation_operand)) @if (!empty($translationAddition->translation_addition) || !empty($translationAddition->translation_comment)) --> @endif translation_operand >>; @endforeach 3) Обнулять размер шрифта только у содержимого цикла. Для этого заворачивать его в дополнительный спан.
.kill-the-space < font-size: 0; >.text, .semicolon < font-size: 20px; ) @foreach ($bridge->translationAdditions as $translationAddition) @if (!empty($translationAddition->translation_addition)) translation_addition >> @endif @if (!empty($translationAddition->translation_comment)) translation_comment >> @endif @if (!empty($translationAddition->translation_operand)) translation_operand >> @endif ; @endforeach UPD. Предлагаю добавить в ваш код HTML-комментарии, чтобы спрятать просвет между спанами:
@if ('' != $wmeaning->multi_translation) multi_translation >>; @endif @foreach ($bridge->translationAdditions as $translationAddition) @if (!empty($translationAddition->translation_addition)) translation_addition >>translation_comment)) translation_comment >>translation_operand)) translation_operand >>; @endforeach Если программа такое не переварит, то клонировать точку с запятой:
@if ('' != $wmeaning->multi_translation) multi_translation >>; @endif @foreach ($bridge->translationAdditions as $translationAddition) @if (!empty($translationAddition->translation_addition)) translation_addition >>; @endif @if (!empty($translationAddition->translation_comment)) translation_comment >>; @endif @if (!empty($translationAddition->translation_operand)) translation_operand >>; @endif @endforeach А вот так можно заткнуть дыру с помощью стилей:
.container < font-size: 0; >.text, .semicolon < font-size: 20px; ) text1;
text2 ;
text3 ; Перенос текста на новую строку в HTML: код и примеры
В разработке веб-страницы возникает необходимость переносить текст на новую строку. Это может быть нужно, когда текст слишком длинный для одной строки или когда нужно создать список.
В HTML для переноса текста на новую строку существует несколько способов. Один из них – использование тега . Этот тег просто создает перенос строки без пробела и ширины строки. Это удобно, когда вам нужно перенести текст на новую строку, но не хотите изменять выравнивание и ширину строки.
Еще один способ – использование тега , который создает новый абзац текста с переносом строки перед и после текста. Это удобно, когда нужно разделить текст на разные блоки с отступами.
Важно знать и применять различные способы переноса текста на странице для создания читабельного и привлекательного контента.
Проблема переноса текста в HTML коде
Одной из основных проблем, с которой сталкиваются веб-разработчики, является перенос текста на новую строку в HTML коде. Не всегда текст подходит по размеру заданной области на сайте, поэтому важно знать, как правильно решить эту проблему.
В HTML коде есть несколько способов перенести текст на новую строку, но не все они одинаково эффективны в определенных ситуациях. Один из способов — использование тега
, но это решение имеет свои ограничения и не всегда подходит для длинного текста.
Другой способ — использование CSS свойств для управления переносом текста. Например, свойство word-wrap: break-word; позволяет делать автоматический перенос слов на новую строку, если они не вмещаются в заданный размер области. Еще один вариант — использование свойства text-wrap: unrestricted; , которое позволяет тексту выходить за пределы заданной области, что может быть полезно для определенных дизайнерских целей.
- Итак, важно помнить о том, что:
- использование тега
не всегда является оптимальным решением; - для оптимального управления переносом текста лучше использовать CSS свойства;
- выбор конкретного способа зависит от дизайнерских целей и нужд сайта.
Перенос текста на новую строку в HTML: методы и примеры кода
Один из основных принципов HTML — это разметка текста, который будет отображаться на сайте. Однако, иногда необходимо перенести текст на новую строку. Это может быть полезно для создания списков, подчеркивания важной информации или просто для улучшения читаемости. В HTML существует несколько способов для переноса текста, которые можно использовать в зависимости от ситуации и предпочтений.
Специальный символ «br»
Перенос текста на новую строку часто осуществляется при помощи специального символа «br». Для создания переноса нужно использовать этот символ в конце строки:
Пример:
Это текст на первой строке.
Это текст на второй строке.
В результате кода выше на странице будет выведен текст на двух строках. Обратите внимание, что символ «br» не имеет закрывающего тега.
Еще по теме: Как создать сайт HTML?
Тег «p»
Другим способом переноса текста на новую строку является использование тега «p», который предназначен для создания абзацев. Каждый новый тег «p» начинает текст с новой строки:
Пример:
Это текст на первой строке.
Это текст на второй строке.
В этом случае на странице также будет выведен текст на двух строках, но уже в виде отдельных абзацев.
Тег «ul» и «li»
Для создания списков в HTML используются теги «ul» (ненумерованный список) и «li» (элемент списка). Каждый элемент списка начинается с новой строки:
Пример:
- Это первый элемент списка.
- Это второй элемент списка.
В результате получится список, каждый элемент которого начинается с новой строки. Этот способ может быть использован для удобства читаемости, а также для выделения основных элементов на странице.
Способ с помощью таблицы
Также можно использовать таблицу для переноса текста на новую строку. Для этого необходимо создать таблицу с одной колонкой и указать каждую новую строку в отдельной ячейке:
Пример:
Это текст на первой строке. Это текст на второй строке.
В этом случае на странице будет сформирована таблица с одной колонкой и двумя строками, каждая из которых начинается с новой строки. Этот способ помогает лучше структурировать информацию на странице.
HTML тег: его применение и примеры
HTML тег — это элемент языка разметки, который используется для оформления и структурирования содержимого веб-страницы. Он может определять какое-то содержимое, а нести смысловую нагрузку.
Например, тег используется для выделения текста жирным шрифтом. Он может использоваться для подчеркивания особо важных слов или фраз. Например:
Когда вы выбираете место для пикника, убедитесь, что оно находится на открытом пространстве вдали от деревьев и кустарников.
Тег используется для выделения текста курсивом. Он используется, чтобы указать на слова с определенной эмоциональной нагрузкой, такие как удивление, сомнение, эмоциональный подтекст, и т.д. Например:
Как же много звезд на небе ночью! Я никогда не думал, что их может быть так много в одном месте.
-
создает неупорядоченный список, тег
- создает элемент списка. Например:
- Купить хлеб
- Приготовить обед
- Посетить музей
- Выбрать тему для выпускной работы
- Провести исследование
- Написать работу и защитить ее
Фрукты Овощи Яблоки Морковь Груши Салат Разрыв строки в HTML с помощью CSS
В HTML есть теги для переноса строки, но если нужно оформить текст более сложным образом, лучше использовать CSS. С помощью CSS можно задать отступы, выравнивание, размер шрифта и цвет текста.
Для разрыва строки с помощью CSS используется свойство «line-break». С помощью данного свойства можно задать, как длинная будет строка, и что произойдет, когда она полностью заполнена.
Свойство «line-break» может принимать два значения: «auto» и «always». Значение «auto» означает автоматический перенос строки, когда строка достигает своей максимальной длины. Значение «always» означает, что строка всегда будет переноситься, даже если она не достигла своей максимальной длины.
Например, чтобы добавить перенос строки после каждого слова в тексте, можно использовать следующий CSS-код:
Таким образом, при достижении максимальной длины строки, текст будет переноситься по словам. Это удобно при оформлении длинных ссылок, чтобы они не выходили за границы блока.
Кроме того, для разрыва строки в CSS можно использовать свойство «hyphens», которое разрывает слова на части, если они не помещаются на одной строке. Это свойство подходит для длинных слов на других языках, где слова могут быть длиннее, чем в русском языке.
В данном случае можно использовать код следующего вида:
Таким образом, CSS позволяет оформить текст более красиво и понятно, разрывая строки в нужных местах и подстраиваясь под длину слов.
Использование тега
для создания абзацев и переноса текста
В HTML есть возможность создавать текстовые блоки с помощью тега
. Он позволяет выделить определенный участок текста, а также создать новый абзац с переносом строки.
Для того чтобы создать новый абзац, необходимо использовать тег
и заключить в него текст. Перенос строки будет выполнен автоматически, без использования тега
. В случае необходимости добавления специального форматирования, такого как жирный или курсивный шрифт, используются соответствующие теги и .Очень удобно использовать тег
при написании длинных текстов, чтобы разбить их на абзацы и облегчить восприятие информации. Также, данный тег может использоваться для оформления новостных статей, блогов, описания товаров и услуг.
- Недостатки использования тега :
- Отсутствует возможность задания точного размера символов;
- Невозможно выбирать конкретные цвета и шрифты для каждого абзаца;
- Преимущества использования тега :
- Простота и удобство использования;
- Возможность автоматического форматирования и переноса текста на новую строку;
Таким образом, использование тега
является необходимым при создании текстовых блоков в HTML. Он позволяет разбить длинные тексты на понятные абзацы и облегчить восприятие информации.
Перенос текста на новую строку с помощью тега
Для переноса текста на новую строку в HTML используется тег . Этот тег не имеет закрывающего тега, а является одиночным и может быть использован в любом месте, где необходим перенос строки.
Пример использования тега
:- Меня зовут Анна
Я живу в городе Москва - Как дела?
Надеюсь, у тебя все хорошо
В первом примере тег
используется для разделения имени и места жительства на две строки. Во втором примере он используется для переноса вопроса на новую строку. Обратите внимание, что после тега
текст начинается с новой строки.Кроме тега
, в HTML существует еще несколько способов переноса текста на новую строку. Например, можно использовать тег для создания нового абзаца или тег для разделения текста на блоки. Также можно использовать свойство CSS white-space: pre; для отображения текста с сохранением всех пробелов и переносов строк.Но тег
является самым простым и удобным способом переноса текста на новую строку в HTML.Перенос текста внутри ячеек таблицы
Таблицы — популярный инструмент для организации и форматирования информации на сайте. Когда текст в ячейке таблицы не умещается в одну строку, важно правильно задать перенос. Это позволит улучшить внешний вид таблицы и сделать ее более удобной для чтения.
Существует несколько способов переноса текста внутри ячеек таблицы. Один из них — использование свойства CSS word-wrap. Если задать значение этого свойства как «break-word», длинное слово внутри ячейки будет перенесено на новую строку, чтобы весь текст был отображен полностью.
Другой способ — использование HTML-тега . Это тег переноса строки в HTML, который создает новую строку и переносит следующий текст на следующую строку. В ячейках таблицы его можно использовать, чтобы перенести текст на новую строку, когда он не помещается в одну строку.
В зависимости от дизайна и структуры таблицы, можно выбрать наилучший способ переноса текста в ее ячейках. Главное — не забывать об удобстве чтения и понимания представленной информации.
Стилизация переноса текста в HTML
Перенос текста в HTML может быть стилизован с помощью CSS. Для этого можно использовать свойство word-wrap, которое позволяет задать, каким образом будет происходить перенос слов внутри контейнера. Например:
- word-wrap: normal — перенос текста происходит только в том случае, если это необходимо из-за ограничений размера контейнера.
- word-wrap: break-word — если слово не помещается в строку целиком, то оно будет перенесено на следующую строку.
- word-wrap: none — текст не обрезается и выходит за пределы контейнера.
Также можно использовать свойство word-break, которое позволяет задать правила переноса слов внутри строки. Например:
- word-break: normal — переносится только при наличии дефисов или пробелов.
- word-break: break-all — слова обрезаются на любой символ, если они не помещаются в одну строку целиком.
- word-break: keep-all — не выполняет переносы, чтобы сохранить связь между языками в многоязычной раскладке.
Во время стилизации переноса текста в HTML нужно учитывать не только правильность отображения, но и читаемость и удобство использования контента.
Важно! Использование свойств word-wrap и word-break влияет на читаемость и доступность текста для пользователей. Переносы слов должны быть выполнены таким образом, чтобы текст сохранял свою смысловую цель и не ухудшал качество восприятия контента. Перенос текста в HTML: проблема кроссбраузерности
Перенос текста на новую строку является необходимым элементом веб-разработки. Но при работе с различными браузерами возникают нюансы, связанные с кроссбраузерностью переноса текста. Часто при использовании пробелов или тега
в некоторых браузерах происходит отступ последней буквы на новую строку, что вызывает дополнительные проблемы с версткой и дизайном.Чтобы избежать подобных проблем, необходимо использовать CSS-свойство word-wrap: break-word; , которое позволяет обеспечить правильный перенос текста без дополнительных пробелов или тегов. Кроме того, следует использовать свойство overflow-wrap: break-word; для старых версий браузеров.
Для более точного контроля над переносом текста можно использовать свойства CSS, такие как text-indent и text-align . Также, есть возможность использовать специальные символы, такие как , которые позволяют определить место переноса текста в определенном месте в слове.
Важно помнить, что кроссбраузерность переноса текста в HTML зависит от многих факторов, таких как используемые теги, поддерживаемые свойства CSS и версии браузеров. Поэтому для обеспечения корректной работы и отображения текста на любых устройствах, следует использовать все доступные возможности и методы контроля переноса текста в HTML.
Вопрос-ответ:
Какой код использовать для переноса текста на новую строку в HTML?
Для переноса текста на новую строку в HTML используется тег
или сочетание символов
.Можно ли использовать несколько тегов
для переноса текста в HTML?Да, можно использовать несколько тегов
для переноса текста в HTML. Однако это не является лучшей практикой, так как это может привести к бесконечному увеличению вертикального пространства.Как использовать сочетание символов
для переноса текста на новую строку в HTML?Сочетание символов
используется для того, чтобы делать перенос текста на новую строку в HTML и одновременно закрывать тег. Это предотвращает проблемы с отображением страницы, которые могут возникнуть при использовании множества тегов
.Могут ли теги
мешать вёрстке страницы?Да, теги
могут мешать вёрстке страницы, если их используют слишком часто или неправильно. Лучше использовать CSS для оформления текста, включая переносы на новую строку.Как сделать перенос текста на новую строку в HTML5?
В HTML5 рекомендуется использовать сочетание символов
для переноса текста на новую строку. Также в HTML5 добавили новый элемент , который может использоваться для разрыва длинных слов в тексте.Css троеточие: Троеточие в конце строки средствами CSS, свойство text-overflow: ellipsis – Как поставить многоточие в конце блока с текстом без использование js?? — Хабр Q&A
Допустим у нас есть текст произвольной длины, который должен выводиться внутри блока фиксированной высоты и ширины. Мы хотим, чтобы отображался такой фрагмент текста, который полностью помещается в заданный блок, и многоточие, если текст помещается не полностью. Это довольно распространенная задача, пример подобных блоков показан на рисунке ниже.
В то же время эта задача не является такой тривиальной, как кажется. Давайте рассмотрим возможные варианты ее решения.
Решение на 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, но важно помнить о производительности и применять функцию обрезки текста только действительно в нужных местах.
Нашли опечатку? Orphus: Ctrl+Enter
© getinstance.info Все права защищены. 2014–2018
Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.
Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста. Например, это может понадобиться для мобильной версии сайта или для интерфейса, в котором важно число строк. В подобных случаях имеет смысл обрезать длинные строки текста, оставив только начало предложения. Так мы приведём интерфейс к компактному виду и сократим объём выводимой информации. Само обрезание строк можно делать на стороне сервера с помощью того же PHP, но через CSS это проще, к тому же всегда можно показать текст целиком, например, при наведении на него курсора мыши. Далее рассмотрим методы, как текст порезать воображаемыми ножницами.
На деле всё сводится к использованию свойства overflow со значением hidden . Различия лишь кроются в разном отображении нашего текста.
Используем overflow
Чтобы свойство overflow показало себя с текстом во всей красе, надо отменить перенос текста с помощью white-space со значением nowrap . Если это не сделать, то нужного нам эффекта не будет, в тексте добавятся переносы и он будет отображаться весь целиком. В примере 1 показано, как обрезать длинный текст указанным набором стилевых свойств.
Пример 1. overflow для текста
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Вид текста после применения свойства overflow
Как видно из рисунка, недостаток в целом один — не очевидно что текст имеет продолжение, так что надо дать об этом понять пользователю. Для этого обычно применяется градиент или многоточие.
Добавляем градиент к тексту
Чтобы стало понятнее, что текст справа не заканчивается, поверх него можно наложить градиент от прозрачного цвета к цвету фона (рис. 2). При этом будет создаваться эффект постепенного растворения текста.
Рис. 2. Текст с градиентом
В примере 2 показано создание этого эффекта. Стиль самого элемента практически останется прежним, сам же градиент будем добавлять с помощью псевдоэлемента ::after и CSS3. Для этого вставляем пустой псевдоэлемент через свойство content и к нему применяем градиент с разными префиксами для основных браузеров (пример 2). Ширину градиента легко изменять через width , также можно регулировать степень прозрачности, заменив значение 0.2 на своё.
Пример 2. Градиент поверх текста
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Данный метод не работает в браузере Internet Explorer до версии 8.0 включительно, потому что в нём нет поддержки градиентов. Но можно отказаться от CSS3 и сделать градиент по старинке, через картинку в формате PNG-24.
Этот метод сочетается только с однотонным фоном и в случае фоновой картинки градиент поверх текста будет бросаться в глаза.
Многоточие в конце текста
Вместо градиента в конце обрезанного текста также можно использовать многоточие. Причём оно будет добавляться автоматически с помощью свойства text-overflow . Его понимают все браузеры, включая старые версии IE, и единственным недостатком этого свойства является пока его неясный статус. В CSS3 вроде это свойство входит, но код с ним не проходит валидацию.
В примере 3 показано применение свойства text-overflow со значением ellipsis , которое добавляет многоточие. При наведении курсора мыши на текст, он отображается целиком и подсвечивается фоновым цветом.
Пример 3. Использование text-overflow
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Текст с многоточием
Большим плюсом указанных методов служит тот момент, что градиент и многоточие не отображаются если текст короткий и целиком помещается в заданную область. Так что текст будет выводиться как обычно, когда он целиком виден на экране и обрезаться при уменьшении ширины элемента.
Есть ли решение добавить эллипсис на последней строке внутри div с высотой жидкости (20%)?
Я нашел функцию -webkit-line-clamp в CSS, но в моем случае номер строки будет зависеть от размера окна.
У меня есть этот JSFiddle, чтобы проиллюстрировать проблему. https://jsfiddle.net/96knodm6/
html css css3 ellipsis
15 ответов
Наконец-то я нашел решение сделать то, что хочу. Как p paragraphe и article обертка. Если вы хотите применить эллипсис к p в зависимости от высоты article (который также зависит от высоты окна), вам нужно получить height article , line-height p , а затем articleHeight/lineHeight , чтобы найти число line-clamp , которое можно добавить динамически тогда.
Единственное, что line-height должно быть объявлено в файле css.
Проверьте следующий код. Если вы измените высоту окна, значение line-clamp изменится. Может быть здорово создать плагин, нацеленный на это.
58 Michael_B [2015-10-11 05:50:00]
Если вы хотите применить многоточие (. ) к одной строке текста, CSS делает это несколько проще с text-overflow имущество. Это все еще немного сложно (из-за всех требований – см. Ниже), но text-overflow делает это возможным и надежным.
Если, однако, вы хотите использовать многоточие в многострочном тексте — как это было бы здесь, тогда не ожидайте, что получится весело. CSS не имеет стандартного метода для этого, и обходные пути поражаются и пропускаются.
Эллипсис для текста с одной строкой
С text-overflow эллипсис может применяться к одной строке текста. Необходимо выполнить следующие требования CSS:
- должен иметь width , max-width или flex-basis
- должен иметь white-space: nowrap
- должен иметь overflow со значением, отличным от visible
- должен быть display: block или inline-block (или функциональный эквивалент, например гибкий элемент).
Итак, это сработает:
НО, попробуйте удалить width или поместив overflow по умолчанию на visible или удалив white-space: nowrap , или используя что-то иное, кроме элемента контейнера блока, AND, эллипсис терпит неудачу.
Один большой вынос здесь: text-overflow: ellipsis не влияет на многострочный текст. (Только требование white-space: nowrap устраняет эту возможность.)
Эллипсис для многострочного текста
Поскольку CSS не имеет свойства для многоточия в многострочном тексте, были созданы различные обходные пути. Некоторые из этих методов можно найти здесь:
Пожалуйста, проверьте этот css для многоточия в многострочном тексте
CSS3-переполнение
Модуль CSS Overflow содержит функции CSS, связанные с обработкой прокручиваемого переполнения, отображаемого на визуальных носителях. CSS использует термин
переполнение для описания содержимого блока, которое простирается за пределы одного из его краев, т.е. края области содержимого, поля, границы или отступа.
Управление переполнением
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-1. Типы переполнения
Существует два типа переполнения, которое используется браузерами: переполнение эффектов рисования и прокручиваемое переполнение.
Первый тип переполнения представляет собой часть блока и его содержимое, которые создают визуальные эффекты за пределами рамки элемента. К визуальным эффектам относятся тень блока, рамки элемента, тень текста, нависающие глифы, контуры и т.д.
Прокручиваемое переполнение представляет собой набор элементов, выходящих за пределы области полей блока, для которых должен быть предусмотрен механизм прокрутки (полоса прокрутки, или скроллбар).
2. Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow
Эти свойства определяют, будет ли содержимое блока, включая переполнение любых эффектов рисования, обрезано по краю области полей, и если это так, будет ли этот блок контейнером прокрутки, позволяющим пользователю прокручивать обрезанные части его содержимого. Применяются к блочным, гибким контейнерам и контейнерам-сеткам.
Свойство overflow-x определяет обработку переполнения в горизонтальном направлении (т.е. переполнение с левой и правой сторон блока), а свойство overflow-y определяет обработку переполнения в вертикальном направлении (т.е. переполнение с верхней и нижней сторон блока).
Свойства не наследуются.
overflow-x, overflow-y Значения: visible Значение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков. hidden Содержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки. scroll Содержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента. auto Браузер использует механизм прокрутки только при переполнении блока. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. overflow-x: visible; overflow-x: hidden; overflow-x: scroll; overflow-y: auto; overflow-x: inherit; overflow-x: initial;Свойство overflow — сокращенное свойство, которое задает значения overflow-x и overflow-y в указанном порядке. Если второе значение опущено, оно копируется из первого.
Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed; . Текст может переполнять блок по высоте, изображения — по высоте и ширине.
overflow Значения: visible Значение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков. hidden Содержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки. Также предотвращает отображение фона или границ под плавающими элементами, для которых задано свойство float: left / right; . scroll Содержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента. auto Браузер использует механизм прокрутки только при переполнении блока. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. overflow: visible; overflow: hidden; overflow: scroll; overflow: hidden scroll; overflow: auto; overflow: inherit; overflow: initial;3. Автоматическое многоточие
3.1. Многоточие при переполнении: свойство text-overflow
Свойство позволяет обрезать строчное содержимое в случае, когда оно не умещается в блок-контейнер, визуально обрезая его или отображая многоточием. Текст может переполниться, например, когда ему запрещается перенос, например, из-за white-space: nowrap или отдельное слово слишком длинное, чтобы уместиться.
Свойство работает только при задании следующих условий: должна быть определена ширина блока-контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap . Применяется только к блочным контейнерам.
Свойство не наследуется.
text-overflow Значения: clip Значение по умолчанию. Текст обрезается в пределе области содержимого, при этом может отобразиться лишь часть символа. ellipsis Замещает текст, не уместившийся в блок, с помощью многоточия. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. text-overflow: clip; text-overflow: ellipsis; text-overflow: initial; text-overflow: inherit;По материалам CSS Overflow Module Level 3
CSS многоточие переполнения текста не отображается
У меня есть div с некоторым внутренним содержанием, которое мне нужно иметь многоточие, когда оно переполняется. Я делал это много раз на других элементах, но по какой-то причине это не ведет себя так, как ожидалось.
Кроме того, я специально оставил white-space:nowrap; , потому что содержимое тогда не разбивается на следующую строку в пределах диапазона, в результате чего я вижу только 2-3 слова до начала многоточия. Я хотел бы, чтобы текст занимал всю высоту родительского контейнера, а затем имел многоточие для содержимого, которое существует за этими границами.
Вот рабочая демонстрация: http://jsfiddle.net/sadmicrowave/DhkSA/
.flow-element < position:absolute; font-size:12px; text-align:center; width:75px; height:75px; line-height:70px; border:1px solid #ccc; >.flow-element .inner < position:absolute; width:80%; height:80%; border:1px solid blue; top:0px; bottom:0px; left:0px; right:0px; margin:auto; text-align:center; >.flow-element .long
Может кто-нибудь, пожалуйста, помочь. Мне нужно отобразить как можно больше текста в пределах красного очерченного промежутка, имея многоточие, когда текстовое содержимое переполняет контейнер…
css ellipsis css3
Поделиться Источник sadmicrowave 29 марта 2012 в 18:48
4 Ответов
вы не можете применить text-overflow: ellipsis к встроенным элементам (span), его можно использовать только с блочными элементами (div)
а также использовать white-space:nowrap; при использовании text-overflow: ellipsis;
проверьте это, я преобразовал ваш внутренний промежуток в div, просто для доказательства концепции
я не знаю, почему вы использовали span, но в соответствии с вашей логикой вы можете внести изменения, как я предложил
Обновление:
кто-то подумает, что в вопросе, если я помещаю white-space: nowrap; в элемент span, то text-overflow: ellipsis: работает, так что, возможно, я ошибаюсь, но это не так, потому что вопроситель использовал float: left в теге span, что означает, что тег span будет преобразован в блок box и работать как обычный элемент уровня блока, что также неправильно, потому что если вам нужно поведение элемента block, то используйте элемент уровня блока
Ссылка:
Поделиться Saket Patel 29 марта 2012 в 18:54
Добавьте white-space:nowrap; к вашему .inner div.
Поделиться huzzah 29 марта 2012 в 18:54
white-space:nowrap;к.проточный элемент .long
тогда срабатывает перелив-эллиспсис.
Поделиться Sven Bieder 29 марта 2012 в 18:56
Я думаю, что вы обнаружите, что проблема вызвана наличием text-align: center;
Поделиться Peter Presnell 22 марта 2013 в 21:31
CSS многоточие переполнения текста с несколькими элементами
Вот что я хочу сделать: Держите текст и кнопку в одной строке и выровняйте по центру При уменьшении размера экрана, всегда держите кнопку отображается во время переполнения текста: многоточие…
Многоточие переполнения текста с таблицей
У меня есть макет, который центрируется с помощью класса box-center. Теперь я хочу добавить многоточие переполнения текста, но оно больше не центрируется. .box-center < display: table; table-layout:…
Обнаружение переполнения текста CSS: многоточие в Firefox
Я пытаюсь обнаружить (через javascript), когда происходит переполнение текста. После долгих исследований у меня есть рабочее решение, за исключением любой версии Firefox:…
html canvas многоточие переполнения текста
Можно ли нарисовать текст на canvas, который имеет многоточие в конце текста, если текст не будет соответствовать доступной ширине и должен быть усечен? Спасибо.
многоточие переполнения текста не работает с динамической шириной
надеюсь, кто-нибудь сможет помочь. У меня есть 3 вложенных div. Родитель, дети и дети детей. Что я хочу сделать (мотив не имеет значения), так это то, что этот ребенок получает относительную ширину…
Как показать многоточие переполнения текста в середине текста
Я использую сетку кендо с фиксированной шириной. Если текст больше, то он показывает многоточие. Но я могу различать строки, основанные на конце строки. Из-за этого эффекта я не могу его найти….
CSS текст-многоточие переполнения не работает в сетке / Flex
Я не могу заставить многоточие переполнения текста работать в сетке css. Текст усечен, но точки с многоточием не отображаются. Вот мой css: .grid < display: grid; margin: auto; width: 90%;…
Многоточие переполнения текста на двух строках
Я знаю, что вы можете использовать комбинацию правил CSS, чтобы текст заканчивался многоточием (…) когда пришло время переполнения (выйти за пределы родительских границ). Можно ли (не стесняйтесь…
Определите, отображается ли многоточие при использовании -webkit-line-clamp для многострочного многоточия
Мы используем многострочный эллипсис CSS в соответствии с https://css-tricks.com/line-clampin/ . Мы хотим определить, отображается ли многоточие, и принять решение показать подсказку на основе того,…
многоточие не работает (flexbox)
Как с помощью CSS скрыть текст, выходящий за блок: применение свойства webkit-line-clamp
От автора: когда свойство -webkit-line-clamp применяется к блоку текста (например, абзацу), текст можно ограничить указанным количеством строк (1 или более), и в конец последней видимой строки добавить многоточие (…). Таким образом, вы можете с помощью CSS скрыть текст, выходящий за блок.
/* Ограничиваем блок текста тремя строками */
Примечание. Убедитесь, что элемент не имеет (нижнего) отступа, чтобы не допускать визуализации текстовых строк за пределами границ. Если вокруг усеченного текста требуется отступ, примените отступ к родительскому элементу.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Свойство -webkit-line-clamp указывается в модуле CSS Overflow (раздел 5.1.1.) И уже поддерживается во всех основных браузерах, кроме Firefox, реализация недавно появилась в Firefox Nightly и может появиться в Firefox уже в июле (в версии 68).
Источник: https://webplatform.news
Редакция: Команда webformyself.
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
-
создает упорядоченный список, а тег