text-align justify not working

后端 未结 10 1822
名媛妹妹
名媛妹妹 2020-12-05 04:48

I\'m trying to justify the text within this p tag so that it perfectly fits the width of the p.

相关标签:
10条回答
  • 2020-12-05 04:52

    If your text doesn't span more than one line, justifying doesn't do anything. Your text has to wrap to the next line, and then the FIRST line will be justified, but not the second.

    0 讨论(0)
  • 2020-12-05 04:56

    You can use the solution described here: http://blog.vjeux.com/2011/css/css-one-line-justify.html

    This will justify a single line but adds a space after, so if you know the height, you can specify it with overflow:hidden to conceal it and still get the justification.

    .fulljustify {
        	text-align:justify;
        }
        .fulljustify:after {
            content: "";
            display: inline-block;
            width: 100%;	
        }
        #tagline {
            height: 80px;
            overflow: hidden;
            line-height: 80px; /* vert-center */
        }
    <p id="tagline" class="fulljustify">Blah blah blah</p>

    0 讨论(0)
  • 2020-12-05 05:05

    To make it look good on Chrome & opera (multiline justify looks bad on them)

    I use the following

    .fulljustify {
      text-align: justify;
      display: table-row;
      text-align-last: left;
    }
    
    0 讨论(0)
  • 2020-12-05 05:06

    There is also something similar, like display: flex; justify-content: space-around; if you would wrap those texts in spans or divs

    0 讨论(0)
  • 2020-12-05 05:06

    You better try

    style="text-align:justifty;display:inline-block;"
    
    0 讨论(0)
  • 2020-12-05 05:06

    Just use style="text-align:justify".
    It works in all browsers.

    0 讨论(0)
提交回复
热议问题