How would you vertically justify text with css/Javascript?

Question

We have a div on our site and want to vertically JUSTIFY the text within it (not vertical align or center- justify).

Here's a basic example (using Bootstrap 3+, btw):

<div class="row">
    <div class="col-xs-12 col-sm-4 v-justify">
        this is our text that we need verticlaly justified.  lorem ipsum dolor amet, etc...
    </div>
    <div class="col-xs-12 col-sm-4 portCell">
        This is a div with a responsive image in it so we don't know the height.
        For arguments sake we'll say 300px
    </div>
    <div class="col-xs-12 col-sm-4 portCell">
        This is a another div with a responsive image in it so we don't know the height.
        For arguments sake we'll say 300px
    </div>
</div>

How could we get the text in that first DIV to justify vertically. Bonus points for just CSS solution with media query-friendly styling for full device support.

Answer based on Andrew Rockwell's solution

This loops through by class (v-justify) so we could apply it to multiple areas on our site.

$('.v-justify').each(function(){
    var justify = $(this);
    var maxHeight = justify.parent().next('.portCell').height();
    var fontSize = 1.5;
    while ( maxHeight > justify.height() ) {
          justify.css('font-size', (fontSize+=1.7) + 'px');
     }
});

Can you share what you would like it to look like in the end? — Grizzly, Nov 21 '16 at 20:31
The CSS Flexbox can take care of this for you. But, there is a bit of a learning curve. See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for a tutorial. — Scott Marcus, Nov 21 '16 at 20:31
Can you explain what vertically justified means? Do you want it to fill up the entire container from top to bottom? — Austin Ezell, Nov 21 '16 at 20:31
@AustinEzell: exactly. We are developing an internal site for our organization and we have about 100 different screen sizes we have to design for and want the text to resize and break to make it fill the div vertically at every size. — Dan Kaufman, Nov 21 '16 at 20:34
@BviLLe_Kid- here is a Fiddle of roughly what we're looking for. As I said, though, our images are dynamic and will change constantly so the size is not static and it needs to be cross-device/screen res friendly. https://jsfiddle.net/dkaufmanjs/sp3rLang/3/ — Dan Kaufman, Nov 21 '16 at 20:53

score 1 · Accepted Answer · answered Nov 21 '16 at 23:45

1

How's this: https://jsfiddle.net/sp3rLang/4/

var justify = document.getElementById('v-justify');
var maxHeight = justify.parentElement.clientHeight;
var fontSize = 1;
while ( maxHeight > justify.clientHeight ) {
    justify.style.fontSize = fontSize++ + 'px';
}
// the while loop will always break a font size over the maxHeight
justify.style.fontSize = ( fontSize - 1 ) + 'px';

answered Nov 21 '16 at 23:45

Andrew Rockwell

444
6
13

Modified this slightly for reuse by class using jQuery as we have a few divs and articles this needs to apply to but this did the trick. Thanks! – Dan Kaufman Nov 22 '16 at 21:37

score 0 · Answer 2 · answered Nov 21 '16 at 20:53

CSS Flexbox makes aligning content into gridlike formations much easier than it ever was, but there is a bit of a learning curve to it.

If you look at the CSS comments, you can replace space-around with space-between for the content to touch the top and bottom of its container and the rest of the space will be evenly divided between the elements.

And, per your request, these classes can be swapped out in media queries as needed.

       /* Flexbox is based on the concept that the flex "boxes"
           be inside of a container element.
        */
       .flex-container {
         border:3px solid green;
         list-style:none;
         display:flex; 
         height:200px;
          width:500px;
          padding:0;
          margin:0;


          /* THIS IS WHAT GIVES US THE EVEN SPACING
             YOU CAN REPLACE "space-around" with "space-between"
             TO GET A SLIGHTLY DIFFERENT JUSTIFICATION   */
       justify-content:space-around; 

          /* This gives us columns as opposed to rows: */
          flex-direction:column;
       }

        /* ...and, then the container contains the
           flexbox items.
        */
       .flex-item {
          background:tomato;
          font-weight:bold;
          font-size:.7em;
          text-align:center;
          border:2px dashed black;
          height:20px;
           width:100%;
       }

     <ul class="flex-container">
       <li class="flex-item one">One</li>
       <li class="flex-item two">Two</li>
       <li class="flex-item three">Three</li>
       <li class="flex-item four">Four</li>
     </ul>

This is great example for getting the div to resize to the size of the image divs but it does not do anything to the text. I changed flex-direction to 'row' for layout: https://jsfiddle.net/dkaufmanjs/y1x83dw3/1/ — Dan Kaufman, Nov 21 '16 at 21:03

How would you vertically justify text with css/Javascript?

Answer based on Andrew Rockwell's solution

2 Answers2