How to fill a div with text except for the last three characters

Question

Basically, I want to fill a div with some descriptive text that might be shorter or longer than what the div width and height can handle.

What I want to do is fill the div as best as possible, and if the text is too much for the div I want to add a HTML … at the end to indicate thats there more content than is visible.

So far I've been doing it using trial and error to work out how many characters can fit into the div and then using Left() to cut the string to that size minus 3 characters so that there's enough space to append the … on the end.

Basically its not working out very well with words being chopped off half way through even though theres enough space left to easily fit it in. Is there a better way to doing this? I can't imagine theres anyway to work out mathematically how many characters can fit into a div?

Regarding cutting away part of a word, once you get to your maximum character count, look for the first space prior to that, and take away everything from that point forward. — Dan Bracuk, Feb 14 '15 at 18:11
I would suggest you do this using Javascript, I'm sure if you search Google you will find some code snippets to do this or a plugin for a framework like jQuery very easily. — andrewdixon, Feb 14 '15 at 18:23
Already answered here: http://stackoverflow.com/questions/17028911/text-overflow-ellipsis-without-white-space-nowrap — Simon Mason, Feb 14 '15 at 18:25
Here is a jQuery plugin as well - http://www.aakashweb.com/demos/jquery-collapser/ — andrewdixon, Feb 14 '15 at 18:29
@DanBracuk I've just sorted that one out using a UDF called FullLeft() — volume one, Feb 14 '15 at 18:50
Looks like I'll have to use yet another plugin... thanks for the link @SimonMason it looks to be just what I need — volume one, Feb 14 '15 at 19:03

Anupam Basak · Accepted Answer · 2015-02-14T19:44:13.153

4

You can use the text-overflow: ellipsis property of css to handle the overflowed text.

Here is the Fiddle: http://jsfiddle.net/fy1qa6o8/

Alternate Answer:

Here is a css solution to the multiline text overflow.
Fiddle: http://jsfiddle.net/97crm7nt/1/

edited Feb 14 '15 at 19:44

answered Feb 14 '15 at 18:31

Anupam Basak

1,503
11
13

sadly its not working very well. i updated the fiddle with the CSS I'm using and it doesn't work? http://jsfiddle.net/fy1qa6o8/1/ – volume one Feb 14 '15 at 18:49
you need to have `white-space: nowrap` for the ellipsis to work. Here is the update Fiddle: http://jsfiddle.net/fy1qa6o8/2/ – Anupam Basak Feb 14 '15 at 18:51
But the height of my div is 100px. If I put nowrap then its all on one line. I need it to fill the box vertically and horizontally. I think a JS route might be the only option – volume one Feb 14 '15 at 18:54
For multiline textoverflow you need to do with js. There's no option. – Anupam Basak Feb 14 '15 at 18:55
Edited the answer. Hope it helps. – Anupam Basak Feb 14 '15 at 19:11
But the edited solution doesn't show multiple lines? – volume one Feb 14 '15 at 19:42
Corrected the url. See now. – Anupam Basak Feb 14 '15 at 19:45
Nice, I like it. Voted as answer – volume one Feb 14 '15 at 20:27

Regular Jo · Answer 2 · 2015-02-15T19:09:49.923

Regarding a Cold Fusion function to do this, Regex can actually make very simple work of this (I'm not saying it's the approach you need to take here, but there may be cases where it's a usueful approach. I use it in image generation.

<cfscript>
  function RELeft(string rstring,numeric num,numeric mnum = 0) {
    if (len(arguments.rstring) lte num) {
      return rstring;
    } else {
      var match = ReMatch("^(.{#arguments.mnum#,#arguments.num#}(?=\s|$)|.{#arguments.mnum#,#arguments.num#}(?=\b|))",arguments.rstring);
      return match[1];
    }
  }
</cfscript>
<cfset teststring = "this sentenc!- C.I.A. has more than 15 characters, but I only want the first 15, without breaki/ng at a word." />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15)# -<br><br></cfoutput>
<cfset teststring = "Shortness." />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15)#<br><br></cfoutput>
<cfset teststring = "a.b.c.d.e.f.g.h.i.j.k.l.m.n" />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15,15)#<br><br></cfoutput>
<cfset teststring = "myspacebarcalledinsick" />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15,13)#<br><br></cfoutput>
<cfset teststring = "a supercalifragilisticexpialidocious day." />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15)#<br><br></cfoutput>
<cfset teststring = "a supercalifragilisticexpialidocious day." />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft(min 4): `#RELeft("teststring",15,4)#`<br><br></cfoutput>

In truth, some people might want to do this with \b(regex word boundary). I choose not to do this because . is a word boundary and you might get tripped up on an abbreviation like F.B.I.. My function will only match at a period if it absolutely must, say a string like a.b.c.d.e.f.g.h.i.j.k.m.n.o.p..

It also offers a third parameter to set a minimum number of characters before finding the first space. You can see the difference in the last two examples.

@volumeone I've seen that one, it's a fine function. If you're not comfortable with regex, it's easier to read if you ever need to modify it but I think mine has some nice options and it prioritizes characters it's willing to break on.. — Regular Jo, Feb 15 '15 at 17:51
I tried it out but its breaking oddly. I passed in a huge paragraph which starts with the text `"Description: Superdry women's Cropped Super Raincoat."` like this `#RELeft(Arguments.Description, 225)#` and I got this as the output `Description:` If I do it like `#RELeft(Arguments.Description, 225, 225)#` then it breaks halfway through a word e.g. `military practices have conve…` — volume one, Feb 15 '15 at 18:58

How to fill a div with text except for the last three characters

2 Answers2