justify text by changing the width of container

Question

I want text in my tooltips to be justified, but not as in css by making big spaces between words, but by adjusting container width.

For example here's the tooltip

I don't want my tooltips to stretch to 1000px if there is a lot of text, so I set max width to 300px.

By setting max width I get into situations where tooltip looked perfectly if I widened the container a little, in this case 15px.

Or there might be a case when I wanted to narrow the element for text to fit exactly.

What is the best way to do that ?

The best way I can think of is to get last word, wrap it in a span, measure the distance to the edge and if it's less than 50%, to widen or if more to shrink the container until container's height changes which means line was added or removed

Answer 1

Try this one: http://jsfiddle.net/hLMkD/1/

It gets the real width of the String by injecting a hidden element and then sets the width of the tooltip to the width of the real string if it is in a defined range defined by delta

$(document).ready(function() {
    $('.tooltip').each(function() {
        var $this = $(this);
        var delta = 20;

        // get the real width of the string
        var $tester = $('<div class="tester" />').appendTo('body').text($this.text());
        var stringWidth = $tester.width();
        $tester.remove();

        if($this.width()+delta > stringWidth) {
            $this.width(stringWidth);
        }
    });
});

Hope i could help a bit, needs a bit of fiddling i think but it should point you to the idea.

---

I thought this one over and came to the point, that a pure CSS solution might be what you are searching for. You can set the tooltip to display:inline-block, so it will only take as much place as the text needs (which solves your narrow down use-case) and then set a max-width to your desired width.

Check http://jsfiddle.net/hLMkD/1/ again.

Answer 2

Fiddle : http://jsfiddle.net/aslancods/jbGc6/7/

 /* css */
   body {
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size: 12.6px;
        } // to make font proper


  .tool-tip {
            display: inline-block;
            word-break: break-all;
        } // tool-tip set to inline-block, so that it wraps text we can calculate text width

  /* tip-span class is added after setting width to tooltip */
  .tip-span:after {
                content: " "
            }
  .tip-span:last-child:after {
                content: ""
            }

<div class="tool-tip" id="tip" >
    Maecenas ultricies dolor id fringilla ornare. 
    Vestibulum quis semper quam, 
</div>
<div class="invisible" id="invisible"></div>

    /* JS */
    //get text inside tool-tip 
    var arr = $('.tip')[0].innerHTML.split(/\s+/); 

    //wrap each word with span and append to tool-tip
    for( i=0; i< arr.length; i++  ) {
        html += "<span>";
        html += arr[i];
        html += "</span>";
    }
    $('.tip')[0].innerHTML = html;


    // len = no: of words
    // get total width of text by calculating total tool-tip width 
    var tip_width = $('.tip').width();

   // find by which number, tip_width is divisible. it is the no of lines or no of rows of text
   // calculate width
   // width = ( tip_width + ( no:of words * ( width taken by a space ) ) ) / no: of rows
    for( i=2; i< len; i++ ) {

        if( ( tip_width % i ) == 0 ){
            setWidth = ( tip_width + (len * spaceWidth) ) / i;      
            if( setWidth <= 300 ) { // rows will choosen if it is lesser than 300
                console.log( i )
                break;
            }
        }

    }

  //set width to tool tip
  tip.css({ 'width': setWidth+'px' });