Firefox is short by one line
Opened this issue · 11 comments
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>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
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.
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;
}
- 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!).
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: 52North@347f164?w=1
@matthesrieke your commit not fix problem.
@ZapevalovAnton ok, can you provide an example where the fix does not work? I could take a look and try to improve it.
having the same problem in the FF
the option is the {clamp:3} but is short by one line
This is still an issue. Does anyone have a fix?
This plugin is now maintained by @jmenglis. Fixed the issue mentioned above:
https://github.com/jmenglis/clamp-js-main
I have same issue but with IE, firefox works fine.