Как растянуть текст на всю ширину блока?
Есть блок (голубой на картинке) и текст. Как этот текст растянуть на весь блок?
- Вопрос задан более трёх лет назад
- 19795 просмотров
1 комментарий
Простой 1 комментарий
SecretBrain @SecretBrain
Как растянуть текст css
Подскажите пожалуйста, как можно растянуть текст по ширине всего слоя
———————
Галерея скульптуры
галерея современной скульптуры и пластики
———————
Нужно чтобы эти обе надписи имели одну ширину.
Вариант с «text-align: justify» не подходит (не срабатывает), а через letter-spacing подбирать значения на глаз тоже не подходящий вариант.
Laravel/Vue expert
Старожил Подтвердите свой е-майл
Регистрация: 08.08.2007
Сообщений: 2,832
Как именно вы тогда собираетесь практически растягивать? За счет увеличения пространства между двумя этими словами?
Регистрация: 11.02.2009
Сообщений: 2
Я не знаю, есть ли другие способы растянуть — вот потому и спросил
Может подскажете, есть ли способ растянуть эти слова в таком случае:
———————-
———————-
То есть в случае, когда я знаю ширину обоих слоев — есть ли способ растянуть слова на одинаковую ширину?
Студент, не
Регистрация: 29.01.2009
Сообщений: 2,067
Действительно что-то не растягивается.
I am the First of Cyber Evolution.
I am the First to Program your Future.
Форумчанин
Регистрация: 15.11.2008
Сообщений: 285
Justify по идее не работает только в ie 5.5 и 6.0, но у меня вообще ни где не работает, мне кажется что через css поставленную задачу не решить. Можно js использовать но это жестоко будет.
Чем точнее и проще задан вопрос, тем проще на него получить точный ответ.
Последний раз редактировалось Deight; 26.02.2009 в 19:25 .
Студент, не
Регистрация: 29.01.2009
Сообщений: 2,067
Я тут посмотрел. «justify» работает, но для большого текста на несколько строк вниз. И чтоб слов в каждой строке было больше трёх.
Я думаю лучше будет сделать вручную картинку с текстом, и уже её растягивать (если нужно).
I am the First of Cyber Evolution.
I am the First to Program your Future.
HTML & CSS: как не надо
Фиксированная высота и absolute для текстовых блоков
Не задавайте текстовым блокам фиксированную высоту #
Почему? # При увеличении количества текста он вывалится наружу и может наложиться на нижележащие элементы. Как это увидеть? # Можно отредактировать исходный HTML, а можно выполнить в консоли браузера такую команду: А как надо? # Решение зависит от того, что нужно сделать. Если у блока по макету есть минимальная высота, но контента недостаточно, чтобы его растянуть, используйте min-height :
Изменим текст: 
А как надо? # В этом случае лучше перенести position:absolute на картинку и добавить min-height , чтобы блок не схлопывался по высоте текста (иначе может вывалиться картинка):
Итого
- Не задавайте текстовым блокам фиксированную высоту, лучше использовать min-height .
- По возможности, не используйте absolute для позиционирования текстовых блоков. Если текст должен наползать на картинку, абсолютное позиционирование лучше задать картинке.
letter — spacing
letter — spacing задаёт межбуквенное расстояние — интервал между символами в тексте.
Пример
Скопировать ссылку «Пример» Скопировано
Стандартное расстояние между символами:
p letter-spacing: normal;>p letter-spacing: normal; >
Расстояние, заданное вручную с помощью значений длины:
p letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px;>p letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px; >
Значение, относительно другого элемента:
p letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset;>p letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; >
Как понять
Скопировать ссылку «Как понять» Скопировано
С помощью letter — spacing можно сжать или растянуть текст на веб-странице. При этом расстояние между буквами и другими символами уменьшается или увеличивается, а сами символы остаются прежнего размера.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Задать межбуквенное расстояние можно в пикселях px , дюймах in , пунктах pt или других единицах, которые используются в CSS.
Значение может быть отрицательным, например, -1px . В этом случае убедитесь, что текст всё ещё можно прочесть, потому что, скорее всего, буквы «склеятся».
Вот какие значения можно задать:
- normal — стандартное межбуквенное расстояние, которое задано для шрифта (значение по умолчанию).
- конкретное значение — положительное или отрицательное значение в любых единицах величины. Значение может быть дробным. Положительное значение добавляется к стандартному расстоянию между буквами, а отрицательное — вычитается из него.
Ещё примеры
Скопировать ссылку «Ещё примеры» Скопировано
Попробуем задать расстояние между символами разными способами:
Стандартное расстояние normal.
Чуть шире, относительно стандартного. Задаём 0.4em.
Ещё шире, относительно стандартного: 1em.
Немного сжимаем с помощью отрицательного значения -0.05em.Добавляем по 6px между символами.
p class="normal">Стандартное расстояние normal.p> p class="em-wide">Чуть шире, относительно стандартного. Задаём 0.4em.p> p class="em-wider">Ещё шире, относительно стандартного: 1em.p> p class="em-tight"> Немного сжимаем с помощью отрицательного значения -0.05em. p> p class="px-wide">Добавляем по 6px между символами.p>
.normal letter-spacing: normal;>.em-wide letter-spacing: 0.4em;>.em-wider letter-spacing: 1em;>.em-tight letter-spacing: -0.05em;>.px-wide letter-spacing: 6px;>.normal letter-spacing: normal; > .em-wide letter-spacing: 0.4em; > .em-wider letter-spacing: 1em; > .em-tight letter-spacing: -0.05em; > .px-wide letter-spacing: 6px; >
Это не совсем то, что нужно. Но как тогда правильно перенести межбуквенное расстояние из Фотошопа в вёрстку?
Нужно использовать следующую хитрую функцию:
x * z / 1000 = y
- z — размер шрифта ( font — size ) в пикселях.
- x — значение межбуквенного расстояния из Фотошоп.
- y — результат вычисления, нужное значение для свойства letter — spacing в пикселях.
Подставим значения с картинки выше:
20 * 18 / 1000 = 0.36px
Можно также вычислить межбуквенное расстояние в em . Для этого используй формулу:
x / 1000 = y
Где x — значение межбуквенного расстояния из Фотошоп.