csstext-alignmenttext-alignjustifytext-justify

Justify text in a div with width 100% - 60px


I have a

#menu {
  width: calc(100vw - 60px);
  left: 30px;
}

How can the words be justified in the available space?

I'm tryin the

text-align:justify

but it doesn't work.

https://jsfiddle.net/ju0mz9t0/1/


Solution

  • I assume you mean the text. This is because text-align: justify doesn't justify the last line of a block of text. One workaround is to add a css generated content item that acts like an inline text item but stretches the full width of the container like so:

    #menu:after {
      content: '';
      display:inline-block;
      width: 100%;
    }
    

    #menu{
    font-family: Arial;
    font-size:22px;
    width: calc(100vw - 60px);
    left: 30px;
    text-align: justify;
    text-justify: inter-word;
    position:fixed;
    }
    
    #menu:after {
      content: '';
      display:inline-block;
      width: 100%;
    }
    <div id="menu">
    SS17 FW16/17 ABOUT STOCKISTS
    </div>