0

I want know that how to find Content length Using only Div Height & width.

If Div height:200px & width:200px than stored content length 298 somthing like that i want.

function contentLength(width, height){    // overflow: hidden;
           return contentLength;
}

Please Tell me if i Pass height width of div that function return me contentLength that div stored.

Gunjan Patel
  • 2,342
  • 4
  • 24
  • 45
  • 3
    Assuming you're talking about number of characters, font selection, line spacing, padding, etc. will all need to be taken into account. But if you have a reference to the div such that you are able to get its height, why can't you get its text content as a string and just check its length? – nnnnnn Jan 12 '15 at 13:24
  • If you really only want the number of charackters you could simply count them? – Fuzzyma Jan 12 '15 at 13:25
  • @nnnnnn Yes Including all. I dont know about string. I want to store string so know the capacity of the div how much that store – Gunjan Patel Jan 12 '15 at 13:25
  • @Fuzzyma I meant I want to know capacity of div stored – Gunjan Patel Jan 12 '15 at 13:26
  • 2
    Why can't you use `$("selector").text().length` ? – Justinas Jan 12 '15 at 13:28
  • At best you can only work out a rough average, because unless you're using a monospaced font: MMMMMMMMMMMMMWWWWWWWiiiiiiiiiiiilllll. – nnnnnn Jan 12 '15 at 13:28
  • @Justinas $("selector").text().length These give me all text length that div stored. With overflow text also – Gunjan Patel Jan 12 '15 at 13:29
  • Looks like you are looking for "line clamping", see this good article: http://css-tricks.com/line-clampin/ – A. Wolff Jan 12 '15 at 13:36

3 Answers3

3

I do not think, that this is possible in any useful way, since Font Size, font spacing, linespacing, padding, font family and even antialiasing etc have to be taken in account in order to calculate this.

Exinferis
  • 689
  • 7
  • 17
  • That's not an answer. And it's sure possible. Just create a div of the given width and add characters until it exceeds the given heigh. The count of characters just before the heigh is exceeded is the capacity op is looking for. – Dirk Lachowski Jan 12 '15 at 13:29
  • 2
    @DirkLachowski - but which characters do you add? Capital W's? Lower-case i's? – nnnnnn Jan 12 '15 at 13:30
  • @Dirk Lachowski It's take too much time if i put one by one character and check overflow occurs or not – Gunjan Patel Jan 12 '15 at 13:31
  • That doesn't mater. If i got the op right, he is looking for a function that gives him the maximal char count of a given text that fits in a given space (div). So, the max char count depends on the text (and the formating). So, trying it out is the best you can do (and js is realy fast enough for that). – Dirk Lachowski Jan 12 '15 at 13:33
  • @GunjanPatel Have you tried it? There shouldn't be such much text in a 200x200 div. – Dirk Lachowski Jan 12 '15 at 13:34
  • @DirkLachowski Yes i tried. 200*200 is small example. I want to store 100 pages text. If div overflow than create other div and store text their ... so on created div – Gunjan Patel Jan 12 '15 at 13:36
  • 2
    For having tried myself I'll agree with @Exinferis saying that it is basically impossible to get a precise number for this. You could get some approximation but it will vary a lot depending of the font, the capitalization and the ligature. And don't forget that the user can zoom in your page. If you really want to fill a specific area, the best option imo would be to fill it word by word, and at every word added test is there is space left, or if it overflow. – Gregoire D. Jan 12 '15 at 13:40
  • @GunjanPatel Have a look at the answer Justinas has provided. It uses a binary search so complexity drops from O(n) to O(log(n)). – Dirk Lachowski Jan 12 '15 at 13:42
0

With JQuery, you can do:

$("div").text().length

This gives you the number of characters within the div.

ArinCool
  • 1,720
  • 1
  • 13
  • 24
  • 1
    While this holds true, @Gunjan Patel asked for content length detection only using width and height of the element. – Exinferis Jan 12 '15 at 13:33
0

var a=$('div').text();
alert(a.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>sakfhndkj ksbd fkjh kjshndfk</div>
Dhaval
  • 2,341
  • 1
  • 13
  • 16