发表新帖
发表新帖

Justify Paragraph Text HTML

前端 未结
关注
4 1853
鱼传尺愫
鱼传尺愫 2020-12-31 18:23

How would one justify this text?? I have tried and searched for days to get something so simple to work..

Ex:

HTML:



        

                      

              相关标签:
4条回答
  • 耶瑟儿～
    2020-12-31 18:47 
    #justify p:after {
  content: "";
  display: inline-block;
  width: 100%;
}

    Through some HTML Trickery, this should work. I found it on a blog post ages ago when I had a similar problem. Check it out on the JSFiddle

    http://jsfiddle.net/xDqwF/2/

    0 讨论(0)
  • Happy的楠姐
    2020-12-31 18:55 
    <html>
    <head>
        <style type="text/css">
            .justify {
                text-align: justify;
                text-justify: inter-word;
            }
        </style>
    </head>
    <body>
        <div class="justify">
            <p>This is justified</p>
        </div>
    </body>
</html>
    0 讨论(0)
  • 感动是毒
    2020-12-31 18:55

    According W3C school text-justify is only supported on IE, but on that since IE 5.5

    text-align can specify justification, as mentioned above, but some cautions:

    • In all browsers I've checked justification is handled by increasing interword spacing. The typical amount of surplus space is 2-4 characters. Divided up on a typical line of 10 words or so, this looks tolerably ok.

    • On lines with fewer words the surplus space has be absorbed in fewer spaces. The result is large gaps. This is a problem in multi-column layouts, or captions under portrait oriented pictures.

    FWIW on a good DTP program, the space for justifying is split between the inter-word spaces, and the inter letter spacing. Good fonts have in internal table of kerning hints to control this spacing. (You can't put as much space between "Y" and "o" as you can between "m" and "n" without it looking odd.)

    0 讨论(0)
  • 小鲜肉
    2020-12-31 18:58

    That's simple, put the text in a <p> an edit this in CSS:

    HTML:

    <div>
  <p id="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.ultricies n.</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.ultricies n.</p>
</div>

    CSS:

    div {
    height:200px;
    width:350px;
}

#justify {      
    text-align: justify;
}

    Live demo.

    0 讨论(0)
 看不清?
提交回复
热议问题