Обоснуйте последнюю строку div? - PullRequest
38 голосов
/ 23 января 2011

Я не думаю "почему?"этот вопрос важен ... но мне нужно text-align:justify последняя строка текста из DIV .Обычно последняя строка (или первая, если других строк нет, что является текущим случаем) элемента div не выровнена, а выровнена по левому краю.Я знаю, что это может вообще не иметь смысла, но мне абсолютно необходимо, чтобы последняя строка была оправдана!

Ответы [ 9 ]

77 голосов
/ 10 июля 2011

Вот кросс-браузерный метод, который работает в 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/

11 голосов
/ 23 января 2011

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

Я тестировал мой пример в 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 на строку выше, чем нужно.

9 голосов
/ 15 июня 2011

Этот метод работал для меня:

Этот трюк называется "Бен Оправдание" *

Ну, это не совсем все с помощью css, вам нужно добавить немного больше в конец строки. Разметка для заголовка выше ...

<h1 id="banner">
    How to justify a single line of text with css<span> &nbsp;</span>
</h1>

Небольшое добавление в конце строки запускает выравнивание строки, начиная новую строку. Дополнительный контент (<span> &nbsp;</span>) переносится на новую строку, потому что пространство имеет ширину 1000 пикселей (с интервалом между словами), а &nbsp; обрабатывается как слово. Дополнительная строка не отображается, потому что размер шрифта установлен в 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 голосов
/ 23 января 2011

CSS3 предлагает решение для этого в виде text-align-last, см. http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last

1 голос
/ 13 июля 2012

У меня была проблема, когда некоторые из приведенных выше ответов работали, но добавили видимую новую строку внизу - что было неприемлемо, потому что у коробки был цвет фона.Я исправил обоснование с помощью кода ниже:

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>
1 голос
/ 23 января 2011

Допустим, я работаю с div-ами, которые "по какой-то причине" (есть одна довольно веская причина) могут иметь только одну строку .... и я хочу их обосновать.

Почему бы вам не использовать text-align: justify;? Это оправдывает каждую строку.Даже если есть только одна строка.

Редактировать : Я думаю, что вы ищете это , как сказал скрагз.В любом случае, это работает только в IE 5.5 и IE 6.

1 голос
/ 23 января 2011

Существует CSS3 IE 5.5 / 6 (спасибо, CSS3.com , НЕ!), Называемое text-justify, которое может делать то, что вы хотитес:

text-justify: distribute-all-lines;

Не уверен насчет поддержки браузера. Какой плагиат.

0 голосов
/ 09 сентября 2014

Если за закрывающим тегом div следует разрыв строки или если тег div использует эквивалентный нижний отступ / отступ, то вы можете просто заменить его заключительной невидимой строкой неразрывных пробелов, например так:

<div>This last line is now for all intents and purposes justified &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

Хотя это, возможно, и не самое красивое решение, это, вероятно, самое безопасное кросс-браузерное решение, поскольку оно не зависит от каких-либо нестандартных настроек. Просто убедитесь, что достаточно символов «nbsp», чтобы всегда вызывать разрыв строки, оставаясь в пределах безопасного поля от максимально допустимого значения в одной строке.

Что касается того, почему кто-то хочет этого, я могу дать свое собственное обоснование тому, кому это может быть интересно; есть ситуации, когда вы хотите разделить непрерывный текстовый блок или текстовый абзац для вставки изображений, таблиц или, как в моем случае, пользовательских сносок непосредственно перед разрывом страницы. Если вы сделаете это, то вы хотите, чтобы последняя строка была сделана прямо перед перерывом, поскольку текст возобновится сразу после произвольного перерыва. В моем случае сноски имеют переменную длину, поэтому я должен вводить их вручную, и поэтому мне также необходимо вручную разделить текстовый блок и вручную принудительно выполнить выравнивание последней строки перед разрывом. Я не знаю ни одного автоматизированного решения, которое бы также поддерживало кросс-браузерную работу, но добавление нескольких неразрывных пробелов делает эту работу по крайней мере для меня ...

0 голосов
/ 27 июня 2014

Когда! 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.

...