Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    91
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Can you count the number of lines in a div

    Hi All,

    Here is another one for those excellent minds to work on.

    For the purpose of the question I have a div with a restricted width but it's height can increase or decrease depending on the number of lines of text in the div, the text wraps to next line once the fixed width is reached and the div's height increases to accommodate the text.

    My question is.
    Is there a way to count the number of lines as the div wraps the text to a new line, the goal being that at five lines say and it tries to wrap the text to show a line six and alert says that is more than five lines.

    So as to not waste your time, I can do something which gives the effect but is limited. It is possible to know the px height of the div that contains a font of a set px size and when the scroll height of that div exceeds the known height an alert can be set off.

    However, you can only use on one font px size for that method because a larger or smaller font px will result in different div heights so the set px which the scroll height is measured against is redundant. The div height method is really a cheat because of course it is not really counting the number of lines, it just knows the div is taller than it should be and that triggers the alert.


    Martin.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Why not simply put *ONE CHARACTER* into the <div> and then measure the height? (You can then remove the character if you want to start out with a blank <div>.)

    And then simply check to see when the <div>'s height exceeds 5 times that value?

    Another way: If the text is added to the <div> one character at a time, just keep track of the number of times the height changes.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    91
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Old Pedant,

    That is what I was saying in the last part of my question so as to not get the same idea back. I can already make a code to know if the height of the div was exceeded.

    My comment was saying that if different text font sizes were used and appeared bigger or smaller in the div which is the case then the knowing the height to set off the alert when that height was exceeded won't work as there would only be one reference height to measure against (60px). Say for example only, five lines of a font which was 12 pixels high would make the div 60 pixels tall and the alert could happen above that, so the sixth line would make the div 72 pixels and alert would happen because the div can be measured against the reference.

    So that is fine because the five lines fitted due to pixel size. However, the input which writes into the div could place a font 18 pixels tall. Then if lines were added, three would be 54 pixels which is within the limit and four lines would be 72 pixels so the alert would show because the height exceeded the 60 pixel reference limit and we never even got to the fifth line.

    That is why I was asking if you can actually count seen lines is some way.

    Martin.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Oh...sorry. I thought you mean the font size would be the same throughout the <div> but you just didn't know what it would be.

    You are talking about actually changing the font size for various characters at random within the <div>.

    I don't see an answer for that one.

    Even my idea of adding one character at a time doesn't work: If you add a character 20 pixels high and then one 40 pixels high, you'd see that the height of the <div> doubled and would assume you now had two lines.

    I'll think on it, but offhand I don't see anything.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    91
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi,

    That is correct by way of your example, there could be random sizes, so any measure of height just won't work.

    What puzzles me is the <div> knows it wrapped to a next line or it could never know to display it as a next line, so what tells it that.

    I will wait to see if you can think of something, but this time around I have a feeling it is one up for the humans because we can simple look a something and say there are two lines or five lines.

    Martin.

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    put each word in it's own
    span, find the verticle
    position of each span
    the number of different
    verticle positions equals
    the number of lines

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    OOOHHH...I like it!

    I gather he is using some WYSIWYG editor and wants to include this feature.

    If the editor does *NOT* put each word in a separate span--that is, if text in the default font is just plunked into the <div> without a span or if in some cases multiple words are put into a single span--it would be easy enough to use JS to add <span>s to each word.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    well i got that wrong
    you should check the
    horizonal position to see
    how many are at the left
    side of the div

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by SpidersWebHelp View Post
    My question is.
    Is there a way to count the number of lines as the div wraps the text to a new line, the goal being that at five lines say and it tries to wrap the text to show a line six and alert says that is more than five lines.

    So as to not waste your time, I can do something which gives the effect but is limited. It is possible to know the px height of the div that contains a font of a set px size and when the scroll height of that div exceeds the known height an alert can be set off.

    However, you can only use on one font px size for that method because a larger or smaller font px will result in different div heights so the set px which the scroll height is measured against is redundant. The div height method is really a cheat because of course it is not really counting the number of lines, it just knows the div is taller than it should be and that triggers the alert.
    I would imagine that the easiest way to "count the number of lines" is to use a uniform line height via the line-height property, and consider it an error when the height of the div element exceeds five times the line height.

    This allows for the use case of multiple font sizes and inline blocks (like images) and, if the person is simply typing a paragraph (without headings and such), then you'd probably want a uniform line height in the first place anyway since non-uniform line heights are visually ugly.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    A lot of what is easy and what is not will depend on how easy it is to modify the code that is currently used to write content into the <div>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •