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.
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>