StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I recently read about a very clever technique to do exactly what you're asking.</p> <p>In short, you just need to use <code>text-align:justify;</code> on the container element to achieve this, in conjunction with an extra invisible block at the end.</p> <p>This works because <code>inline-block</code> elements are seen as being part of the text content, each being effectively a single word.</p> <p>Using <code>justify</code> will spread out the words in your text so that they fill the entire width of the element with extra space between the words. For <code>inline-block</code> elements, this means that they are spaced out with even spaces between them.</p> <p>I mentioned an extra invisible block at the end. This is required because normal <code>text-align:justify</code> won't justify the last line of text. For normal text, that's exactly what you want, but for aligning <code>inline-block</code> boxes, you want them all to be aligned.</p> <p>The solution is to add an extra invisible but 100% width element to the end of your list of <code>inline-block</code> elements. This will become effectively the last line of text, and thus the <code>justify</code> technique will work for the rest of your blocks.</p> <p>You can use the <code>:after</code> pseudo-selector to create the invisible element without needing to modify your markup.</p> <p>Here's an updated version of your jsFiddle to demonstrate: <a href="http://jsfiddle.net/ULQwf/298/" rel="noreferrer">http://jsfiddle.net/ULQwf/298/</a></p> <p>And here's the original article that explains it in more detail: <a href="http://www.barrelny.com/blog/text-align-justify-and-rwd/" rel="noreferrer">http://www.barrelny.com/blog/text-align-justify-and-rwd/</a></p> <p><strong>[EDIT]</strong> One final update after seeing the image you've added to the question. (I don't have a better answer, but some additional thoughts that might be useful).</p> <p>Ideally what you need here is a <code>:last-line</code> selector. Then you could <code>text-align:justify</code> the main text and <code>text-align:center</code> the last line. That would do what you want.</p> <p>Sadly, <code>:last-line</code> isn't a valid selector (<code>:first-line</code> is, but not <code>:last-line</code>), so that's the end of that idea.</p> <p>A slightly more hopeful thought is <code>text-align-last</code>, which <em>does</em> exist as a feature. This could do exactly what you want:</p> <pre><code>text-align:justify; text-align-last:center; </code></pre> <p>Perfect.</p> <p>Except that it's non-standard and has very limited browser support.</p> <p>You can <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last" rel="noreferrer">read about here on MDN</a>.</p> <p>I guess as a last resort it might be an option for you, if you can live with only partial browser support. It would at least get what you want for <em>some</em> of your users. But that's not really a sensible way to go.</p> <p>My gut feeling though is that this as as close as you're going to get. Tantalisingly close to what you want, but just not quite there. I hope I'm proved wrong, but I'll be surprised. Too bad though, because I it would seem like a perfectly logical thing to want to do.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload