Название документа

Растянуть текст по ширине div

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

Вы хотите изменить «spacing between the letters» (как в letter-spacing ) или font-size ? Изменить: или, как в ответе @SmudgerDan’s SmudgerDan, расстояние между словами ?

@GeorgeKatsanos GeorgeKatsanos Я считаю, что «text-align: justify» не всегда правильно заполняет область. Например, если у меня есть div с шириной 300 пикселей, с текстовым содержимым «Lorem Ipsum», это не растягивает, чтобы заполнить область

7 ответов

Как сказал Марк, text-align:justify; является самым простым решением. Однако для короткого текста это не будет иметь никакого эффекта. Следующий код jQuery растягивает текст до ширины контейнера.

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

Если текст слишком длинный для размещения в контейнере, он позволяет ему расширяться до следующих строк и устанавливает text-align:justify; в текст.

Вот демонстрационная версия:

$.fn.strech_text = function()< var elmt = $(this), cont_width = elmt.width(), txt = elmt.html(), one_line = $('' + txt + ''), nb_char = elmt.text().length, spacing = cont_width/nb_char, txt_width; elmt.html(one_line); txt_width = one_line.width(); if (txt_width < cont_width)< var char_width = txt_width/nb_char, ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char ; one_line.css(); > else < one_line.contents().unwrap(); elmt.addClass('justify'); >>; $(document).ready(function () < $('.stretch').each(function()< $(this).strech_text(); >); >);

p < width:300px; padding: 10px 0;background:gold;>a .stretch_it < white-space: nowrap; >.justify < text-align:justify; >.one .two .three .four .arial

 
Stretch me
 
Stretch me
 
Stretch link
 
I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.
 
Stretch me
 
Stretch me
 
Stretch me
 
Don't stretch me

Это было очень полезно для меня, я сделал несколько изменений, чтобы он тоже работал быстро : jsfiddle.net/DPRr9/347

Это можно сделать с помощью text-align:justify и небольшого взлома. См. Здесь: http://codepen.io/aakilfernandes/pen/IEAhF/

Трюк заключается в добавлении элемента после текста, который притворяется действительно длинным словом. Поддельное слово на самом деле является элементом span с display:inline-block и width:100% .

В моем примере поддельное слово в красном цвете и имеет высоту 1em, но хак будет работать даже без него.

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

Не уверен, что вы подразумеваете под «разделить буквы равномерно». Вы имеете в виду, что каждая буква должна быть разделена равномерно, независимо от пробелов?

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

Возможно, это могло бы помочь:

Я нашел лучшее решение для текста короче, чем одна строка, без каких-либо дополнительных js или тегов, только один класс.

Еще проще использовать метод HTML/CSS для использования flexbox. Он также сразу реагирует. Но стоит отметить, что SEO не подберет его, если вы будете использовать его как h1 или что-то в этом роде.

Я думаю, что вы на самом деле ищете масштабирование.

Измените свой шрифт с помощью красивого разрешения, которое имеет смысл, а затем используйте JS, чтобы растянуть его в контейнере с помощью css-преобразований:

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

Быстрое примечание: вам нужно, чтобы элемент, который вы пытаетесь сжать/развернуть, имеет абсолютную позицию:

За исключением того, что это портит либо размер шрифта, либо соотношение сторон самого шрифта, что не является желаемым.

Для чисто HTML/CSS-решения даже для более короткого текста (достаточно короткий, чтобы

Я следил за этой большой почтой как вдохновение и разместил каждую букву в div

Ещё вопросы

• 0 jQuery: генерировать ссылку из содержимого ячейки таблицы
• 0 Fullcalendar mousewheel event prev next
• 1 Я объявил метод, но он показывает ошибку при вызове [closed]
• 1 MVC Linq OrderBy не сохраняется в Razor View
• 0 Как скомпилировать дополнительные / обновленные библиотеки плюс новую программу в отдельном / автономном каталоге в Linux
• 0 Выбор QTreeView очищает цвет текста
• 0 JQuery запускающее действие при загрузке страницы
• 1 изменить данные XML в C #
• 0 Угловая директива для пользовательской проверки
• 0 MySQL выбирает одно значение из таблицы, если есть два языка [дубликата]
• 1 Собрать модель java.lang.Void для корневого проекта?
• 1 Java Rect.intersects () иногда не работает
• 0 Как mysqli_fetch_row при использовании mysqli_multi_query
• 0 Как использовать угловой повтор с ng-grid и щелкнуть мышью?
• 1 Kotlin абстрактный класс вторичный конструктор
• 1 Отделение сервиса ServiceStack от бизнес-логики
• 1 Как запросить предложение для клиента Java Solr?
• 0 Сменить модель триггера на переключателе?
• 1 Создать открытую переменную для конкретной формы
• 0 Как переключать строки в угловых, чтобы развернуть или свернуть ряд, как в аккордеоне?
• 0 Перебрать массив в JavaScript и связать его с другой переменной
• 0 Получить содержимое файла HTML и добавить в строку PHP
• 1 Сохранение перетаскивания позиций
• 1 & amp в URL, используя window.location
• 1 Использование понимания вложенного списка для проверки и изменения всех столбцов фрейма данных
• 1 Java-класс, работающий с программным обеспечением MATLAB
• 1 Котлин как проблема мультиплатформенности
• 0 Исключить некоторые атрибуты из реляционной сущности RestBundle Symfony2
• 1 ошибка при использовании двойной универсальности
• 0 тип документа не допускает здесь элемент «BR»; при условии отсутствия стартового тега «LI»
• 0 Как привязать сгенерированные d3 HTML-элементы к области видимости?
• 0 Могу ли я объединить эти вызовы g ++ в один?
• 1 Spring JPA Hibernate обрабатывает большие базы данных
• 0 Как преодолеть недостаток дружбы в C #?
• 1 Как использовать Содержит с Guid?
• 1 Разрешить Java заканчиваться на main () без закрытия процессов, которые были выполнены exec ()
• 0 Неопределенная ссылка — CodeBlocks
• 0 Выберите все старше 48 часов
• 1 Удаление смежных дубликатов в ArrayList [Java]
• 1 каковы различия между различными способами создания экземпляра JAVA_HOME в Ubuntu
• 0 HTML читается как недопустимый, перемещая содержимое HTML в
• 0 Добавление файла в crontab через скрипт php
• 0 Счетчик продолжает повторять, пожалуйста, дайте ответ
• 0 Функция forEach намного быстрее, чем эквивалент для цикла
• 0 проблемы с плагином проверки jQuery и входным файлом
• 0 Проверка конца строки и пробела
• 0 Дерево с 3 детьми
• 0 Ошибка основного дампа связанного списка C ++
• 1 Выбор массива, чтобы стать свойствами объекта
• 0 Как я могу получить несколько подпапок / пространств имен в модуле ZF2

Источник

Css строка во всю ширину

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

В этом разделе перечислены все уроки без разделения по рубрикам.

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

Как выбрать хороший хостинг для своего сайта?

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

Создан: 15 Апреля 2020 Просмотров: 10600 Комментариев: 0

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Создан: 23 Ноября 2018 Просмотров: 18151 Комментариев: 0

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

Почему WordPress лучше чем Joomla ?

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Создан: 26 Августа 2017 Просмотров: 28583 Комментариев: 0

Про шаблоны WordPress

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

Создан: 3 Августа 2017 Просмотров: 26536 Комментариев: 0

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Самые первые настройки после установки движка WordPress

Сегодня мы вам расскажем какие первые настройки нужно сделать после установки движка WordPress. Этот урок будет очень полезен для новичков.

Источник

Растянуть текст по ширине div

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

Вы хотите изменить «spacing between the letters» (как в letter-spacing ) или font-size ? Изменить: или, как в ответе @SmudgerDan’s SmudgerDan, расстояние между словами ?

@GeorgeKatsanos GeorgeKatsanos Я считаю, что «text-align: justify» не всегда правильно заполняет область. Например, если у меня есть div с шириной 300 пикселей, с текстовым содержимым «Lorem Ipsum», это не растягивает, чтобы заполнить область

7 ответов

Как сказал Марк, text-align:justify; является самым простым решением. Однако для короткого текста это не будет иметь никакого эффекта. Следующий код jQuery растягивает текст до ширины контейнера.

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

Если текст слишком длинный для размещения в контейнере, он позволяет ему расширяться до следующих строк и устанавливает text-align:justify; в текст.

Вот демонстрационная версия:

$.fn.strech_text = function()< var elmt = $(this), cont_width = elmt.width(), txt = elmt.html(), one_line = $('' + txt + ''), nb_char = elmt.text().length, spacing = cont_width/nb_char, txt_width; elmt.html(one_line); txt_width = one_line.width(); if (txt_width < cont_width)< var char_width = txt_width/nb_char, ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char ; one_line.css(); > else < one_line.contents().unwrap(); elmt.addClass('justify'); >>; $(document).ready(function () < $('.stretch').each(function()< $(this).strech_text(); >); >);

p < width:300px; padding: 10px 0;background:gold;>a .stretch_it < white-space: nowrap; >.justify < text-align:justify; >.one .two .three .four .arial

 
Stretch me
 
Stretch me
 
Stretch link
 
I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.
 
Stretch me
 
Stretch me
 
Stretch me
 
Don't stretch me

Источник

CSS: Выравнивание текста

По умолчанию текст на веб-страницах выровнен по левому краю элемента, в котором он располагается, однако используя свойство text-align, можно переопределить, как будут выравниваться строки текста относительно границ элемента. Рассмотрим каждое из возможных значений:

• left — выравнивает текст по левому краю.
• right — выравнивает текст по правому краю.
• center — выравнивает текст по центру.
• justify — выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.

       
Пример выравнивания текста
 
февраль, 2012
 
Помимо выравнивания текста, для первой строки абзаца был задан небольшой отступ, который визуально добавляет "красную строку" к тексту. Этот эффект очень пригодится на страницах с большими объемами текста, облегчая визуальное восприятие.
  

Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник