Обоснуйте последнюю строку div?
Я не думаю "почему?" этого вопроса важно... но что мне нужно сделать, это text-align:justify последняя строка текста из DIV. Обычно последняя строка (или первая, если других строк нет, что является текущим случаем) элемента div не выровнена, а выровнена по левому краю. Я знаю, что это может вообще не иметь смысла, но мне абсолютно необходима последняя строка, чтобы быть оправданной!
9 ответов
Вот кросс-браузерный метод, который работает в IE6+
Он сочетает в себе text-align-last: justify; который поддерживается IE и разновидностью метода: after. Он включает в себя исправление для удаления дополнительного пространства, добавленного после однострочных текстовых элементов.
CSS:
p, h1{
text-align: justify;
text-align-last: justify;
}
p:after, h1:after{
content: "";
display: inline-block;
width: 100%;
}
Если у вас есть одна строка текста, используйте это, чтобы предотвратить пустую строку, которую приведенный выше CSS вызовет
h1{
text-align: justify;
text-align-last: justify;
height: 1em;
line-height: 1;
}
h1:after{
content: "";
display: inline-block;
width: 100%;
}
Более подробная информация: http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/
Это самый чистый взлом, который я мог придумать / найти. Ваш пробег может отличаться.
Я тестировал мой пример в IE8, Firefox, Chrome, Opera, Safari.
IE7 не реализует :after псевдокласс, так что там не получится.
Если вам нужна поддержка IE7, то, вероятно, сработает " ___" внутри постороннего span в конце div (использовать JS?).
CSS:
div {
width: 618px;
text-align: justify
}
div:after {
content: " __________________________________________________________";
line-height: 0;
visibility: hidden
}
HTML:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>
К сожалению, похоже, что div линия выше, чем она должна быть.
Этот метод работал для меня:
Этот трюк называется "Бен Оправдание" *
Ну, это не совсем все с CSS, вам нужно добавить немного больше в конце строки. Разметка для заголовка выше...
<h1 id="banner">
How to justify a single line of text with css<span> </span>
</h1>
Небольшое добавление в конце строки запускает выравнивание строки, начиная новую строку. Дополнительный контент (<span> </span>) переносится на новую строку, потому что пространство имеет ширину 1000 пикселей (с интервалом между словами) и рассматривается как слово. Дополнительная строка не отображается, потому что размер шрифта установлен в 0px.
Обновление, 23 января-11: я только что обновил разметку, добавив пробел после интервала и установив для шрифта размер шрифта 1px: это необходимо для IE8. Спасибо Мамуну Гадиру за то, что он указал на проблемы IE.
CSS для заголовка выше...
h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}
h1#banner span {
font-size: 1px ;
word-spacing: 1000px;
}
* Если нет доказательств того, что этот метод был опубликован ранее, я настоящим называю этот метод "Бен Оправдание" и объявляю его бесплатным для использования всеми.
Бен Клэй, январь 2010
Источник: http://www.evolutioncomputing.co.uk/technical-1001.html
CSS3 предлагает решение для этого в виде text-align-lastсм. http://www.w3.org/TR/2010/WD-css3-text-20101005/
У меня была проблема, из-за которой работали некоторые из приведенных выше ответов, но я добавил видимую новую строку внизу, что было неприемлемо, потому что у окна был цвет фона. Я исправил обоснование с помощью кода ниже:
JQuery:
$(".justify").each(function(index, element) {
var original_height = $(this).height();
$(this).append("<span style='display: inline-block;visibility: hidden;width:100%;'></span>");
$(this).height(original_height);
});
HTML:
<div class="justify" style="width:100px; background-color:#CCC">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Допустим, я работаю с div-ами, которые "по какой-то причине" (есть одна довольно веская причина) могут иметь только одну строку… и я хочу их обосновать.
Почему ты не используешь text-align: justify;? Это оправдывает каждую строку. Даже если есть только одна строка.
Редактировать: Я думаю, что вы ищете это, как сказал скрагз. В любом случае, это работает только в IE 5.5 и IE 6.
Когда!DOCTYPE - это HTML5, решения Кристина и Жаки вызывают дополнительную новую строку, которую трудно удалить. Если это беспокоит вас (как и я), вот еще одна идея:
<div style="display: flex;">
Lorem <span style="flex:1;"></span>
ipsum <span style="flex:1;"></span>
dolor <span style="flex:1;"></span>
sit...
</div>
У него есть еще один недостаток: он работает только для однострочного текста и требует изменения содержимого, как показано выше, что не всегда выполнимо / практично. Но есть некоторые ситуации, когда это не проблема (как в моем случае). Может быть даже полезно иметь контроль над позициями, в которые будет вставлено дополнительное пространство. Стили, конечно, встроены только для краткости. Я проверял это только с недавним FFox/IE.
Если за закрывающим тегом div следует разрыв строки или если тег div использует эквивалентный нижний отступ / отступ, то вы можете просто заменить его заключительной невидимой строкой неразрывных пробелов, например так:
<div>This last line is now for all intents and purposes justified </div>
Хотя это, возможно, и не самое красивое решение, это, вероятно, самое безопасное кросс-браузерное решение, поскольку оно не зависит от каких-либо нестандартных настроек. Просто убедитесь, что достаточно символов "nbsp", чтобы всегда вызывать разрыв строки, оставаясь в пределах безопасного поля от максимально допустимого значения в одной строке.
Что касается того, почему кто-то хочет этого, я могу дать свое собственное обоснование тому, кому это может быть интересно; есть ситуации, когда вы хотите разделить непрерывный текстовый блок или текстовый абзац для вставки изображений, таблиц или, как в моем случае, пользовательских сносок непосредственно перед разрывом страницы. Если вы сделаете это, то вы хотите, чтобы последняя строка была сделана прямо перед перерывом, поскольку текст возобновится сразу после произвольного перерыва. В моем случае сноски имеют переменную длину, поэтому я должен вводить их вручную, и поэтому мне также необходимо вручную разделить текстовый блок и вручную принудительно выполнить выравнивание последней строки перед разрывом. Я не знаю ни одного автоматизированного решения, которое бы также поддерживало кросс-браузерную работу, но добавление нескольких неразрывных пробелов по крайней мере для меня...