I wrote a small function implemented on String that will ellipsise strings
for you... Beginning, middle or end. Similar to bootle's approach, but with
the function implemented on the string.

http://www.barryvan.com.au/2009/08/javascript-string-ellipsising/

As far as I know, if you want to dynamically determine text width, you have
two options:

1) Use canvas, which isn't supported in all browsers;
2) Create an absolutely positioned element with no word-wrapping, and add
characters to it until its pixel length reaches some value, which is slow.

Personally, I've found that just using a simple character count works pretty
well in most cases. If you get the right value, the worst that can happen is
extra whitespace in your elements.

http://barryvan.com.au/
[email protected]


On Tue, Feb 23, 2010 at 7:01 AM, Roman Land <[email protected]> wrote:

> Thanks for sharing Bootle!
>
> This looks like a possible solution indeed, would be interested to see
> something even cleverer..
> For example I dont want to calculate max chars manually...
>
> Wonder if there's a plugin that can do this..?
>
>
> On Mon, Feb 22, 2010 at 11:39 PM, bootle <[email protected]> wrote:
>
>> wow, sorry, this one is better: http://www.jsfiddle.net/3fGs3/6/
>>
>> On Feb 22, 9:34 pm, bootle <[email protected]> wrote:
>> > Should be visible for box 5, don't have FF3.5.8 here but I guess it's
>> > the same in 3.6.
>> > It just breaks super long continuous strings into parts so that they
>> > don't go out of wrapper in width. As for text running out the box in
>> > height I'd just estimate how many chars will fit there and substring
>> > the content like here:http://www.jsfiddle.net/3fGs3/5/you could also
>> > run a while loop and check for height of the content I think it would
>> > be pretty inefficient for larger amounts of stuff tho
>> >
>> > On Feb 22, 9:10 pm, "Matthew Hazlett" <[email protected]> wrote:
>> >
>> > > No effect in FF 3.5.8 or ie 8, well for me at least
>> >
>> > > -----Original Message-----
>> > > From: [email protected]
>> >
>> > > [mailto:[email protected]] On Behalf Of bootle
>> > > Sent: Monday, February 22, 2010 3:40 PM
>> > > To: MooTools Users
>> > > Subject: [Moo] Re: Pretty text trimming
>> >
>> > > hey,
>> >
>> > > You can use 'word-wrap: break-word' in CSS, like here:
>> http://www.jsfiddle.net/3fGs3/4/
>> >
>> > > Hope that helps,
>> >
>> > > Matt
>> >
>> > > On Feb 22, 8:27 pm, Roman Land <[email protected]> wrote:
>> > > > Hi,
>> >
>> > > > I made this nice fiddle with BP to demonstrate what I
>> > > mean:http://www.jsfiddle.net/3fGs3/1/
>> >
>> > > > My questions is, what is the best approach with this kind of
>> "content
>> > > boxes"
>> > > > that house different types of texts, these are part of my site where
>> > > there's
>> > > > a list of these boxes with content.
>> >
>> > > > The behavior I am looking for is to handle text that is too long in
>> a way
>> > > > that pleases the eye :)
>> > > > For example I would expect overflowing text to be terminated with
>> > > follwoing
>> > > > "..." before the line ends..
>> >
>> > > > Thanks!
>> >
>> > > > --
>> > > > ---
>> > > > "Make everything as simple as possible, but not simpler."
>> >
>> > > > - Albert Einstein
>> >
>> > > __________ Information from ESET Smart Security, version of virus
>> signature
>> > > database 4888 (20100222) __________
>> >
>> > > The message was checked by ESET Smart Security.
>> >
>> > >http://www.eset.com
>> >
>> > > __________ Information from ESET Smart Security, version of virus
>> signature
>> > > database 4888 (20100222) __________
>> >
>> > > The message was checked by ESET Smart Security.
>> >
>> > >http://www.eset.com
>>
>
>
>
> --
> ---
> "Make everything as simple as possible, but not simpler."
>
> - Albert Einstein
>
>

Reply via email to