如果宽度不够，我如何将多行文本居中对齐，如果它们占据了整个宽度，我该如何对齐？

Question

I have a large paragraph that I want to keep in one p tag. I have seen some solution, but it requires every line to be in a different tag.

the idea is to have lines justified and centered at the same time. I know in CSS it does not make sense as the property text-align defines both for some strange reason.

before posting a solution, please create one <p> or <div> or whatever you want, fill it with three lines of text, and make sure that the first two are justified, and the last one is centered. That is exactly what I am asking for.

Answer 1

I understood your original question and the clarification to be asking for two different things.

If you're trying to make a page that displays short text centered and a long paragraph justified then you could use javascript to check the length of the text and apply the appropriate style.

It would be pretty straightforward to do something like this with jquery:

<p id='fixed_text'>
  Text above a certain length can be displayed as justified and shorter text can be centered
</p>
...
var maxLength = 100;
function sizeParagraph(){
  if($('#fixed_text').text().length > maxLength){
    $('#fixed_text').css('text-align','justified');
  } else {
    $('#fixed_text').css('text-align','center');
  }
}

Answer 2

Rationale: if the height() is equal to the line-height, the paragraph (or any block element) gains the class "oneliner" (which is centered with a css rule).

css:

/*  
    all Ps should be {
        text-align: justified;
        height: auto;
    } by default  
*/
.oneliner {text-align: center}

js:

$(document).ready(function(){
    $('p').each(function(){ // change the "p" selector at will
        var $this = $(this);
        if(Math.round(parseFloat($this.css('lineHeight'), 10)) == $this.height())
            $this.addClass('oneliner');
    });
});

Note that this will not work if you have nested images or block elements taller than the paragraph's line-height, or if the height is not auto.