Растянуть текст по ширине 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
Как можно растянуть ячейку на всю высоту строки
Всем ячейкам задана высота 45px. Одной из ячеек задана высота 69px. Строка растянулась по высоте в 69px.
Как сделать так, чтобы остальные ячейки тоже растянулись по высоте строки ??
height: 100% не будет работать
Мне просто интересно возможно ли как то сделать, не ужели нельзя.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
html> head> title>/title> style type="text/css"> .block < width: 19%; float: left; min-height: 45px; height: 100%; border: 1px solid black; >.block:last-child < height: 69px; >.container < border: 1px solid red; >.container::after < content: ''; clear: both; display: block; >/style> /head> body> div class="container"> class="block">/dib> class="block">/dib> class="block">/dib> class="block">/dib> class="block">/dib> /div> /body> /html>
Как растянуть блоки по высоте строки
Всем ячейкам задана высота 45px. Одной из ячеек задана высота 69px. Строка растянулась по высоте в 69px.
Как сделать так, чтобы остальные ячейки тоже растянулись по высоте строки ??
height: 100% не будет работать
Мне просто интересно возможно ли как то сделать, не ужели нельзя.
Ссылка на комментарий
Поделиться на других сайтах
13 ответов на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
Могу ли я растянуть текст с помощью CSS?
Можно ли растянуть текст в CSS? Я не хочу, чтобы шрифт был больше, потому что это делает его более жирным, чем мелкий текст рядом с ним. Я просто хочу растянуть текст по вертикали, чтобы он как-то деформировался. Это будет в одном div, а затем обычный текст рядом с ним будет в другом div. Как я могу это сделать?
Да, вы можете на самом деле с помощью 2D 2D Transforms. Это поддерживается практически во всех современных браузерах, включая IE9+. Вот пример.
СОВЕТ: Вам может потребоваться добавить маржу к растянутому тексту, чтобы предотвратить текстовые конфликты.
Я отвечу за горизонтальное растяжение текста, так как вертикальная часть – самая простая часть – просто используйте “transform: scaleY()”
this is some stretched text and this is some random
triple line
not stretched textмежбуквенный интервал просто добавляет пробел между буквами, ничего не растягивает, но это своего рода относительный
inline-block, потому что встроенные элементы слишком ограничены и код ниже не будет работать в противном случае
Теперь комбинация, которая имеет значение
размер шрифта, чтобы получить желаемый размер – таким образом, текст будет иметь ту длину, которая должна быть, а текст до и после него появится рядом с ним (scaleX только для галочки, браузер по-прежнему видит элемент в его исходном размере при размещении других элементов).
scaleY, чтобы уменьшить высоту текста, чтобы он соответствовал тексту рядом с ним.
transform-origin, чтобы сделать масштаб текста сверху строки.
margin-bottom установлен в отрицательное значение, чтобы следующая строка была не намного ниже – предпочтительно в процентах, чтобы мы не изменили свойство line-height.
вертикальное выравнивание установлено в верхнюю часть, чтобы предотвратить перемещение текста до или после на другую высоту (поскольку размер растянутого текста составляет 32 пикселя)
– Простой элемент span имеет размер шрифта только для справки.
В вопросе был задан способ предотвратить выделение текста жирным шрифтом, вызванного растяжением, а я до сих пор его не дал, НО свойство font-weight имеет больше значений, чем просто обычный и жирный.
Я знаю, вы просто не можете этого увидеть, но если вы ищете соответствующие шрифты, вы можете использовать больше значений.
Технически, нет. Но то, что вы можете сделать, это использовать размер шрифта, который так высок, как вы хотите, чтобы растянутый шрифт был, а затем конденсировать его по горизонтали с помощью font-stretch .
CSS font-stretch теперь поддерживается во всех основных браузерах (кроме iOS Safari и Opera Mini). Нелегко найти общее семейство шрифтов, которое поддерживает расширяющиеся шрифты, но легко найти шрифты, которые поддерживают уплотнение, например:
font-stretch: condense; font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial; Единственный способ, который я могу придумать для коротких текстов, таких как “МЕНЮ”, – это поместить каждую букву в промежуток и впоследствии выровнять их в контейнере. Как это:
.menu-burger < width: 50px; height: 50px; padding: 5px; >. .menu-burger > div
Всегда возвращаюсь на эту страницу, когда дизайнер натягивает на меня шрифт. Принятое решение прекрасно работает, но я часто сталкиваюсь с проблемами с полями.
Рекомендую использовать преобразование по высоте, а не по ширине, если вы сталкиваетесь с проблемами, для меня это было безопаснее в моем текущем проекте.