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

Question

How can I center-justify text   Currently  justify does not center the last line

User · Answer

For people looking for getting text that is both centered and justified, the following should work:

<div class="center-justified">...lots and lots of text...</div>

With the following CSS rule (adjust the width property as needed):

.center-justified {
  text-align: justify;
  margin: 0 auto;
  width: 30em;
}

Here's the live demo.

What's going on?

text-align: justify; makes sure the text fills the full width of the div it is enclosed in.
margin: 0 auto; is actually a shorthand for four rules:
- The first value is used for the margin-top and margin-bottom rules. The whole thing therefore means margin-top: 0; margin-bottom: 0, i.e. no margins above or below the div.
- The second value is used for the margin-left and margin-right rules. So this rule results in margin-left: auto; margin-right: auto. This is the clever bit: it tells the browser to take whatever space is available on the sides and distribute it evenly on left and right. The result is centered text.
  However, this would not work without
width: 30em;, which limits the width of the div. Only when the width is restricted is there some whitespace left over for margin: auto to distribute. Without this rule the div would take up all available horizontal space, and you'd lose the centering effect.

User · Answer

There doesn t appear to be a way  You can fake it by using justify and then wrapping the last line of text in a span and setting just that to text align center  It works ok for small blocks of text but is not a useful approach to large quantities of text or dynamic text   I suggest finding somebody at Adobe who s involved in their W3C work and nagging them to bring up right left center justification in their next meeting  If anyone s gonna be able to push for  basic typography features in CSS it d be Adobe

User · Answer

Simple  Text-align  justify   to get the elements aligned  Padding-left   px   to center the elements

User · Answer

You can also split the element into two via HTML   JS   HTML    lt div class  justificator  gt  Lorem Ipsum is simply dummy text of the printing and typesetting industry   Lorem Ipsum has been the industry s standard dummy text ever since the 1500s   when an unknown printer took a galley of type and scrambled it to make a  type specimen book   lt  div gt    JS   function justify            Query for elements search     let arr   document querySelectorAll   justificator        for  let current of arr            let oldHeight   current offsetHeight             Stores cut part         let buffer                if  current innerText lastIndexOf       gt   0                while  current offsetHeight    oldHeight                    let lastIndex   current innerText lastIndexOf                       buffer   current innerText substring lastIndex    buffer                  current innerText   current innerText substring 0  lastIndex                             let sibling   current cloneNode true               sibling innerText   buffer              sibling classList remove  justificator                   Center             sibling style  text-align      center                 current style  text-align      justify                  For devices that do support text-align-last             current style  text-align-last      justify                  Insert new element after current             current parentNode insertBefore sibling  current nextSibling                     document addEventListener  DOMContentLoaded   justify     Here is an example with div and p tags  x000D   x000D  function justify     x000D         Query for elements search x000D      let arr   document querySelectorAll   justificator    x000D      for  let current of arr    x000D          let oldHeight   current offsetHeight  x000D             Stores cut part x000D          let buffer       x000D   x000D          if  current innerText lastIndexOf       gt   0    x000D              while  current offsetHeight    oldHeight    x000D                  let lastIndex   current innerText lastIndexOf       x000D                  buffer   current innerText substring lastIndex    buffer  x000D                  current innerText   current innerText substring 0  lastIndex   x000D                x000D              let sibling   current cloneNode true   x000D              sibling innerText   buffer  x000D              sibling classList remove  justificator    x000D                 Center x000D              sibling style  text-align      center   x000D                 For devices that do support text-align-last x000D              current style  text-align-last      justify   x000D              current style  text-align      justify   x000D                 Insert new element after current x000D              current parentNode insertBefore sibling  current nextSibling   x000D            x000D        x000D    x000D  justify    x000D  p justificator   x000D      margin-bottom  0px  x000D    x000D  p justificator   p   x000D      margin-top  0px  x000D    x000D   lt div class  justificator  gt  x000D  Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  x000D   lt  div gt  x000D   lt p class  justificator  gt It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  x000D   lt  p gt  lt p gt Some other text lt  p gt  x000D   x000D   x000D   Disadvantage  doesn t work when page width changes dynamically

User · Answer

You can use the text-align-last property    center-justified       text-align  justify      text-align-last  center      Here is a compatibility table   https   developer mozilla org en-US docs Web CSS text-align-last Browser compatibility    Works in all browsers except for Safari  both Mac and iOS   including Internet Explorer   Also in Internet Explorer  only works with text-align  justify  no other values of text-align  and start and end are not supported

User · Answer

Calculate the length of your text line and create a block which is the same size as the line of text   Center the block   If you have two lines you will need two blocks if they are different lengths   You could use a span tag and a br tag if you don t want extra spaces from the blocks  You can also use the pre tag to format inside a block   And you can do this  style  text-align center     For vertical see  http   www w3schools com cssref pr pos vertical-align asp  Here is the best way for blocks and web page layouts  go here and learn flex the new standard which started in 2009  http   www w3 org TR 2014 WD-css-flexbox-1-20140325  justify-content-property  Also w3schools has lots of flex examples

User · Answer

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     x000D   x000D   paragraph   x000D      width 455px  x000D      text-align justify  x000D    x000D   x000D   center  x000D    display block  x000D    text-align center  x000D    margin-top -17px  x000D    x000D   lt div class  paragraph  gt 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  lt br gt  lt center gt vel scelerisque nisl consectetur et  lt  center gt  lt  div gt  x000D   x000D   x000D    And after the fix    x000D   x000D   paragraph   x000D      width 455px  x000D      text-align justify  x000D      position relative  x000D    x000D   center  x000D    display block  x000D    text-align center  x000D    margin-top -17px  x000D    x000D   paragraph b  x000D    opacity 0  x000D   x000D  -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 0    x000D  filter  alpha opacity 0   x000D  -moz-opacity  0  x000D  -khtml-opacity  0  x000D    x000D   lt div class  paragraph  gt 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   lt b gt    lt  b gt  lt br gt  lt div class  center  gt vel scelerisque nisl consectetur et  lt  div gt  lt  div gt  x000D   x000D   x000D

User · Answer

Most of the solutions here don t take into account any kind of responsive text box   The amount of text on the last line of the paragraph is dictated by the size of the viewers browser  and so it becomes very difficult   I think in short  if you want any kind of browser mobile responsiveness  this isn t possible

User · Answer

its working with this code  text-align  justify  text-align-last  center

User · Answer

lt div class  centered  gt   lt p style  text-align  justify   gt 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 lt  p gt nisl consectetur et  lt  div gt    I was able to achieve the result by wrapping the content in a div tag and applying the attribute text-align  center  Immediately after the div tag I wrapped the content in a paragraph tag and applied attribute  text-align  justify  To make the last line centered  I excluded it from the paragraph tag  which then falls back to attribute applied in the div tag  You just have to strategic about how many words you want on the last line  I ve included a demo from fiddle  Hope this helps    Demo - Center Justify Paragraph Text

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

What's going on?

Examples related to html

Examples related to css