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

Question

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/

Answer 1

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>

Answer 2

Do you mean something like this?
This solution uses display: flex and it's property justify-content: space-between;
Read more about flexbox here
#menu {
display: flex;
font-family: Arial;
font-size: 22px;
width: calc(100vw - 60px);
left: 30px;
text-align: justify;
text-justify: inter-word;
position: fixed;
justify-content: space-between;
}
<div id="menu">
<span>SS17</span><span>FW16/17</span><span>ABOUT</span><span>STOCKISTS</span>
</div>