Обосновать последнюю строку div?

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

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

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

Я тестировал свой пример в IE8, Firefox, Chrome, Opera, Safari.

IE7 не реализует :after псевдоclassа, поэтому он там не работает.

Если вам нужна поддержка IE7, вероятно, будет работать над " ___" внутри постороннего span в конце div (используйте JS?).

Демо-версия ( см. Код )

CSS:

 div { width: 618px; text-align: justify } div:after { content: " __________________________________________________________"; line-height: 0; visibility: hidden } 

HTML:

 
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 больше, чем должно быть.

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

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

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

 

How to justify a single line of text with css  

Маленькое добавление в конце строки вызывает обоснование линии, запустив новую строку. Дополнительный контент (   ) вызывается на новую строку, потому что пространство сделано шириной 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

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

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

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

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

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

 text-justify: distribute-all-lines; 

Не уверен в поддержке браузера. Какая обдираловка.

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

JQuery:

 $(".justify").each(function(index, element) { var original_height = $(this).height(); $(this).append(""); $(this).height(original_height); }); 

HTML:

 
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.

Когда DOCTYPE является HTML5, решения Kristin’s и Jacqui вызывают дополнительную новую строку, которую трудно удалить. Если это беспокоит вас (как и я), вот еще одна идея:

 
Lorem ipsum dolor sit...

Он имеет и другие недостатки: работает только для однострочного текста и требует изменения содержимого, как показано выше, что не всегда выполнимо / практично. Но есть ситуации, когда это не проблема (как в моем случае). Может быть даже полезно иметь контроль над позициями, в которые будет вставлено дополнительное пространство. Разумеется, стили являются единственными для краткости. Я тестировал его только с недавним FFox / IE.

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

 
This last line is now for all intents and purposes justified                                             

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

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

  • Подпиксельный сглаженный текст в элементе canvasа HTML5
  • Тайм-аут в async / wait
  • Вертикальная (повернутая) метка в Android
  • Хороший цвет текста переднего плана для заданного цвета фона
  • Как настроить кнопку UISwitch в iphone?
  • Как эффективно анализировать CSV-файл в Perl?
  • Подчеркивание текста в UIButton
  • Чтобы нарисовать подчеркивание под TextView в Android
  • Форматирование текста в ярлыке WinForm
  • Ограниченный выбор в JTextField / JTextComponent?
  • Как печатать цвет в консоли с помощью System.out.println?
  • Interesting Posts

    Как определить, реализует ли тип определенного типа общего типа

    jquery on vs click методы

    Зафиксировать строку и столбцы в Excel (в то же время)

    AngularJS. Преобразование значения тега (время Unix для чтения человеком)

    Использование дженериков в репозиториях Spring Data JPA

    Как изменить несколько форматов даты в одном столбце

    Если 32-разрядные машины могут обрабатывать только цифры до 2 ^ 32, почему я могу написать 1000000000000 (триллион) без моего сбоя в работе компьютера?

    Могу ли я получить Linux в статусе «Party / Kiosk-Mode»?

    Как реализовать «mainEntityOfPage» на этом конкретном сайте?

    Java: если A расширяет B и B расширяет Object, то это множественное наследование

    Как читать текстовый файл без его блокировки?

    Есть два раздела в RAID1

    Как компьютер загружается даже после отказа батареи CMOS?

    Получение пиксельных данных с изображения с помощью java

    Как удалить все плитки в начальном меню Windows 10?

    Давайте будем гением компьютера.