Clamp.js Firefox is short by one line

I've been testing Clamp.js with the following simple code. I get Firefox consistently showing one less line, while Chrome and IE perform ok.

<html>
<head>
  <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
  <style>
  .mypar {
    margin:0; border:0; padding:0; }
  .mydiv1 {
    position:fixed; background:yellow;
    top:50px; left:50px;
    margin:0; border:1px solid; padding:0;
    width:205px; height:92px; line-height:120%;
    font-family:Arial; font-size:12px; color:black; }
  .mydiv2 {
    position:fixed; background:yellow;
    top:200px; left:50px;
    margin:0; border:1px solid; padding:0;
    width:205px; height:92px; line-height:120%;
    font-family:Arial; font-size:12px; color:black; }
  </style>
</head>
<body>
<script>
window.onload=function() {
  var p = document.getElementById("p1");
  $clamp(p, {clamp: 4}); }
</script>
<div class="mydiv1">
  <p id="p1" class="mypar">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="mydiv2">
  <p id="p2" class="mypar">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</body>
</html>

Dec 24 '14 08:12 nitsand

I'm experiencing the same problem. I just opened the example.html in Firefox and it displays only one line. Chrome is the same by the way.

Cheers, Michel

Dec 31 '14 12:12 michel-kraemer

Nitsand, did you ever find a solution for this? Also having the same issue where FF is showing one less line than it should.

Not sure if this is since a FF update, 'cause I swear it was working fine before.

Feb 05 '15 10:02 webstar

In short: (1) I haven't found a solution but noticed this behavior is not consistent. Sometimes (depending on the text I guess) it did show the correct number of lines. In particular when I asked for 1 line. (2) Since it truncated in the middle words (in spite of the 'splitOnChars' support), I eventually used a simple truncation function I wrote myself, based on estimated no. of characters, plus 'overflow:hidden' just in case... Here is my function: function truncate(text, maxlen) { var truncationChar = '…'; var splitOnChars = [' ', '-', '.', ',', '–', '—', '…']; var i,j,c; if (text.length <= maxlen) return text; for (i=maxlen-1; i>=0; i--) { c = text.substr(i, 1); for (j=0; j<splitOnChars.length; j++) { if (c == splitOnChars[j]) return text.substr(0, i) + truncationChar; } } return text.substr(0, maxlen-1) + truncationChar; }

Feb 05 '15 17:02 nitsand

Damn yeah, what I noticed is that it was actually showing one fewer line in IE too. Fine in Chrome/Safari since they use the -webkit-line-clamp property. I'm thinking it's because of the web fonts I'm using that have a narrower horizontal characters than the default and clamp.js kicks in before they load. Will have to check that out.
Didn't even notice this, but doesn't bother me (or the client!).

Feb 06 '15 08:02 webstar

I stumbled across this issue as well and did a little debugging. I am quite sure that this is an issue with parseInt working differently in Chrome and Firefox.

After passing the int cast to a more downstream function, it seams to work more consistently. Check this commit I just made: https://github.com/52North/Clamp.js/commit/347f16464adbd7d6e8dc1516d681f73c1b1177a4?w=1