Я не думаю, почему? этот вопрос важен... но мне нужно сделать text-align:justify последнюю строку текста из DIV. Обычно последняя строка (или первая, если нет других строк, которая является текущим случаем) div, не является оправданной, но выравнивается влево. Я знаю, что это может не иметь смысла, но мне абсолютно необходимо, чтобы последняя строка была оправдана!
Обосновать последнюю строку div?
Ответ 1
Здесь кросс-браузерный метод, который работает в IE6 +
Он объединяет text-align-last: justify; который поддерживается IE и вариацией: после метода псевдоконтента. Он включает исправление для удаления дополнительного места, добавленного после текстовых элементов одной строки.
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/
Ответ 2
Это самый чистый хак, который я мог бы найти/найти. Ваш пробег может отличаться.
Я тестировал свой пример в 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 выше, чем она должна быть.
Ответ 3
Этот метод работал у меня:
Этот трюк называется "оправдание Бен" *
Ну, это не совсем все с css, вам нужно добавить немного лишнего в конец строки. Разметка для заголовка выше...
<h1 id="banner">
How to justify a single line of text with css<span> </span>
</h1>
Маленькое добавление в конце строки вызывает выравнивание строки, запустив новую строку. Дополнительный контент (<span> </span>) вытесняется на новую строку, потому что пространство составляет 1000 пикселей в ширину (с интервалом между словами) и обрабатывается как слово. Дополнительная строка не отображается, поскольку для fontsize установлено значение 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
Ответ 4
CSS3 предлагает решение для этого в виде text-align-last, см. http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last
Ответ 5
Существует CSS3 IE 5.5/6 (спасибо, CSS3.com, NOT!) свойство, называемое text-justify, который может делать то, что вы хотите:
text-justify: distribute-all-lines;
Не уверен в поддержке браузера. Что такое ripoff.
Ответ 6
Скажем, я работаю с div, что "по какой-то причине" (есть одна довольно веская причина) может иметь только одну строку... и я хочу их оправдать.
Почему бы вам не использовать text-align: justify;? Это оправдывает каждую строку. Даже если есть только одна строка.
Изменить. Я думаю, что вы ищете это, как сказал scragz. В любом случае, это работает только в IE 5.5 и IE 6.
Ответ 7
У меня была проблема, когда некоторые из вышеперечисленных ответов работали, но добавили видимую новую строку внизу - что было неприемлемо, потому что в поле был цвет фона. Я исправил обоснование с помощью кода ниже:
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>
Ответ 8
Когда DOCTYPE является HTML5, решения Kristin и Jacqui вызывают дополнительную строку новой строки, которую трудно удалить. Если это беспокоит вас (как я), вот еще одна идея:
<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.
Ответ 9
Если за закрывающим тегом div следует разрыв строки, или если тег div использует эквивалентное нижнее дополнение /margin, вы можете просто заменить его на завершающую невидимую строку неразрывных пробелов, например:
<div>This last line is now for all intents and purposes justified </div>
Хотя это может быть не самое подходящее решение, это, вероятно, самое безопасное решение для кросс-браузера, поскольку оно не зависит от каких-либо нестандартных настроек. Просто убедитесь, что достаточно символов "nbsp", чтобы всегда приводить к разрыву строки, сохраняя в безопасном поле максимально допустимое значение в одной строке.
Что касается того, зачем это нужно, я могу дать собственное обоснование, кому оно может быть интересно; есть ситуации, когда вы хотите разделить непрерывный текстовый блок или текстовый абзац, чтобы вставлять изображения, таблицы или как в моем случае пользовательские сноски прямо перед разрывом страницы. Если вы это сделаете, вы хотите, чтобы последняя строка перед разрывом была оправдана, так как текст возобновится сразу после произвольного разрыва. В моем случае сноски имеют переменную длину, поэтому я должен вводить их вручную, и поэтому мне также нужно разделить текстовый блок вручную и вручную выровнять последнюю строку до разрыва. Я не знаю ни одного автоматизированного решения, которое также совместимо с кросс-браузером, но добавление кучи неразрывных пробелов делает работу для меня хотя бы...