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

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/

Either way...there are not 4 elements in the div...it's text node....and it will also depend on what is meant by "justify". — Paulie_D, Aug 01 '16 at 14:25

score 4 · Accepted Answer · answered Aug 01 '16 at 14:26

4

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>

answered Aug 01 '16 at 14:26

Joseph Marikle

76,418
17
112
129

@FedericoFerrari You're welcome. Glad I could help. – Joseph Marikle Aug 01 '16 at 14:35
hey. just as a side-question. i know that `text-justify: inter-word;` is not supported in chrome nor in firefox. is this something that would affect the outcome of your solution ? – Mihai T Aug 01 '16 at 14:37
@MihaiT It shouldn't affect it at all if the target text is English (or any language that separates words using spaces) as `text-align:justify` operates that way by default as far as I understand. Ultimately, however, I don't really know. I've never had to use `text-justify: inter-word;`. – Joseph Marikle Aug 01 '16 at 14:50

score 2 · Answer 2 · answered Aug 01 '16 at 14:26

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>

@FedericoFerrari This is probably a better approach. Text nodes are very messy when it comes to styling. — Joseph Marikle, Aug 01 '16 at 14:27

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

2 Answers2