Get the number of characters in a line of a p tag?

I have some text , a part of which I want to put inside a <p> tag.

HTML:

  • Responsive text — Function not Initializing with FitText and FlexSlider
  • WhatsApp share button on website. Easy way to detect if WhatsApp exists?
  • AJAX autoload on scroll within a HTML5 section
  • jQuery css() function changing 'a' property not 'a:hover' property
  • Just disable scroll not hide it?
  • “Best fit” font size - how do I measure a sentence width?
  • <p id="mainTargetP">
    
    </p>
    

    JavaScript:

     var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. a a a  Nullam nec magna eu dui pharetra bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at urna mi."
     var mainTargetP = document.getElementById('mainTargetP') ;
     // mainTargetP.innerHTML = get a part of text into P.
    

    The <p> tag has been given a width, height, font size etc.

    What I have is a large block of text, that I am dividing into paras of fixed width and height. The exact thing I have to figure out is how much text (how many words) from the block of text will fit nicely inside the para. Say if the para has 7 lines , I want to fit in exactly 7 lines of text. Not 6.5 lines , not 7.5 lines. Possible?

    Basically I don’t want any whitespace to be left in the last line, like this:

    Makeshift solution that works with some blocks of text:

    var charsInLine = 63 ;
    var lines = 7
    var charsinTargetP = charInLine * lines - 20 ; 
    var mainTargetP = document.getElementById('mainTargetP') ;
    
    var s1 =text.substring(0,charsinTargetP ) ;
    var nextPara = s1.lastIndexOf(' ')
    mainTargetP.innerHTML = s1.substring(0,nextPara ) ;
    

    Above the -20 value I am taking randomly. Sometimes the value needs to be -40 .

    Hope I was clear, thanks.

  • Django on Pythonanywhere IOError/RuntimeError
  • How to set auto height for extjs hbox layout?
  • Trying to adapt Simple Modal example to asp.net datalist repeater
  • Pixel width of monospace character
  • A cleaner way of appending the same image element to all of a class?
  • Javascript element style
  • 2 Solutions collect form web for “Get the number of characters in a line of a p tag?”

    The most straight-forward way that comes to mind is to temporarily set the paragraph’s height to auto, put one character in it, take its height, and then keep appending characters until the height suddenly increased, indicating that it had word-wrapped. Then remove individual characters (or words, whatever) until the height went back to its original value, and set the height again (since you said the height was defined). Rinse, repeat for the following lines (since they won’t have the same number of characters, not unless you’re using a fixed-width font).

    Below is jQuery based solution.

    HTML:

    <p class="target font"></p>
    <p class="target font"></p><!-- create as many tags as many pages you want -->
    

    CSS:

    .target {
        width: 200px;
        height: 100px;
        border: 1px solid black;
        overflow: hidden;
    }
    
    .font {
        font-size: 12pt;
        text-align: justify
    }
    

    JS:

    var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. a a a  Nullam nec magna eu dui pharetra bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at urna mi.";
    // element which will be appended to the end of each p tag and will cause line break
    var justify = ' <span style="visibility:hidden;">something_very_very_very_long</span>';
    
    var p = $('.target');
    var q = $('<p class="font"></p>"');
    q.css('width', p.width() + 'px');
    q.text(text);
    
    $(document.body).append(q);
    
    var h = p.height();
    
    var newText = text;
    for (var i = 0, j = 0; i < p.length; ++i) {
        while (q.height() > h) {
            newText = newText.substr(0, newText.lastIndexOf(' '));
            q.text(newText);
        }
        $(p[i]).html(newText + justify);
    
        j += newText.length + 1;
        newText = text.substr(j);
        q.html(newText);
    }
    
    q.detach();
    

    Working sample: http://jsfiddle.net/9BBPA/7/