любой способ оправдать отдельные строки абзаца?

Question

; возможно ли это?

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

var max = 0;
$(this).find('p').each(function(){
    if ($(this).width() > max)
        max = $(this).width();    
    });
    $(this).find('p').width(max);
});

text-align: justify; <<< does nothing to one line

Но есть ли способ оправдать одну строку?Без или с расчетом межбуквенного интервала?Или рабочие решения css3?

Answer 1

Я знал, что будет ответом с использованием :after.

p {
    text-align: justify;
}
p:after {
  content: "";
  display: inline-block;
  width: 100%;
}

http://jsfiddle.net/Q5kxP/1/

Просто и эффективно.Реквизиты Vjeux для решения.

Answer 2

Вот ответ, который работает. Как я уже упоминал выше, вы можете определить высоту абзаца в одну строку и запустить этот jquery для любого абзаца меньшего размера. InnerWrap ваш абзац с SPAN, это позволит вам получить ширину строки текста.

Затем найдите разницу между шириной P и шириной SPAN, это даст вам расстояние от конца линии до края. Затем вы можете разделить это на количество пробелов в тексте, указав интервал между словами, который вам понадобится для выравнивания строки.

HTML, оберните все ваши P-теги с помощью span: (или вы можете сделать это тоже с помощью jquery)

<p><span>This is my one line paragraph</span></p>

jQuery, посчитай:

$('p').each(function() {
    var pHeight = $(this).height();
    var pWidth = $(this).width();

    if (pHeight <= 20) {
        // Get the width of the span:
        var spanWidth = $(this).find('span').width();

        // Get the width difference between the P and Span
        var widthDiff = pWidth - spanWidth;

        // Count # of spaces:
        var spaces = $(this).html().split(' ').length - 1;

        // Divide to find word spacing:
        var spacing = widthDiff / spaces;

        $(this).css('word-spacing',spacing);
    }
});​

Проверьте это на JSFiddle: http://jsfiddle.net/wjmZP/3/

Answer 3

Попробуйте определить максимальную высоту однострочного абзаца, скажем, 24px.

$('p').each(function() {
    var pHeight = $(this).height();
    if (pHeight <= 24) {
        $(this).addClass('justify');
    }
});

// css
p.justify { text-align: justify; }

Как только вы найдете это магическое число высоты, все будет в порядке.