How to center-justify the last line of text in CSS?

后端 未结 10 1686
余生分开走
余生分开走 2020-12-02 08:23

How can I center-justify text?

Currently, justify does not center the last line.

10条回答
  •  旧巷少年郎
    2020-12-02 09:14

    Solution (not the best, but still working for some cases) for non-dinamic text with fixed width.Usefull for situations when there are a little space to "stretch" text to the end of the penultimate line. Make some symbols in the end of the paragraph (experiment with their length) and hide it; apply to the paragraph absolute position or just correct free space with padding/marging.

    Good compabitity/crossbrowser way for center-justifying text.

    Example (paragraph before):

    .paragraph {
        width:455px;
        text-align:justify;
    }
    
    .center{
      display:block;
      text-align:center;
      margin-top:-17px;
    }
    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,
    vel scelerisque nisl consectetur et.

    And after the fix:

    .paragraph {
        width:455px;
        text-align:justify;
        position:relative;
    }
    .center{
      display:block;
      text-align:center;
      margin-top:-17px;
    }
    .paragraph b{
      opacity:0;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    }
    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, __
    vel scelerisque nisl consectetur et.

提交回复
热议问题