Space Limit

How can you make it so if your text surpasses the space allowed... it will cut it and add the usual three dots... like "I went to six flags today and it..." limiting the characters doesn't work cuz if 20 W's can fill the space... you shouldn't limit it to 20 cuz 20 a's would only take half the space and it would look awkward if you know what im getting at... is there a standard way of doing this? Thanks

You'll want to use a fix width font, such as these: http://en.wikipedia.org/wiki/Samples_of_Monospaced_typefaces

Thanks for the great idea, but is there any other way to use the font I want and still make it work?

Remember that what exactly font is used (typeface and size) is entirely dependent on client's browser. You can't really use PHP to predict the space taken by text, because you just do not have data for that.

Well how do big companies like Facebook, and MySpace do it?

Facebook seems to be counting characters. Never used MySpace

More less, the only way to perfectly limit text so that it doesn't surpass the given space is to limit the characters and use a mono space font?

So basically there is only one way to completely make sure your text limit fits the space provided perfectly... and that is combining a mono space font with a max character limit... right? if that is right that sucks for the fact that you're limited to a few mono space type fonts....

No, even that won't work. The user can change the font size the browser uses. The real answer is there is no reliable way to do what you that. You can try to force the font size using CSS, but that can be overridden too.

I just want to make it so if a user DOESN'T force the browser to display the text in a different way... the text will fix the 245x41 div box... i use arial font and i like it and limiting the amount of text allowed by characters isn't good enough cuz arial isn't a monospace font which means w isn't the same width as W or a... etc.... any ideas??

If you're determined to use a non-fixed-width font, figure out which is the widest character, and limit it to the maximum number of them that will fit. That's about the best advice i can think of at the moment.

Why dont you make 2 div boxes..

One is the text string

Two is ...

Then put the Z-index of the ... string above the text string

So your Div / cell would look like=

I went to six flags today and it was a fun time

then place your ... at a certain location .. say right 100 pixels and place that on top of your text string div

so now it will be

I went to six flags t[...                                                                      ]

and following lines would look the same

I went to six flags t[...   

WWWWWWWWWV[...

aaaaaaaaaaaaaaa[...

except perfectly aligned since you are placing the ... div X amount of pixles from the left or right. The rest of the ... div would be the same color as your background so you couldnt tell it was actually a layer hovering over the text.

i use arial font and i like it

But you have no (or very little) control over what typeface the browser will use. If the user does not have Arial on their machine installed, then an entirely different font may be used.

i use arial font and i like it

 

But you have no (or very little) control over what typeface the browser will use. If the user does not have Arial on their machine installed, then an entirely different font may be used.

I understand this, but that is their problem... I'm making it work for people who use Firefox, and have Arial font installed on their system.

xcandiottix, thats a good idea but what if it doesn't surpass the allowed space and doesn't need the ... then its gona be their for no reason..

In that case, I reiterate:

If you're determined to use a non-fixed-width font, figure out which is the widest character, and limit it to the maximum number of them that will fit. That's about the best advice i can think of at the moment.

The function you'll need is wordwrap().

Thanks for the idea, but that is not exactly what i need...  i need something that can measure the length of my string in pixels...

xcandiottix, thats a good idea but what if it doesn't surpass the allowed space and doesn't need the ... then its gona be their for no reason..

If(String length < 10 characters){

do no create ... div layer.}

else{

create div layer}

Now it's only there if it needs to be.

nice idea man

nice idea man

The only thing that is going to be tricky is that if you set the DIV to appear at say 20 pixels ... lets look how letters might be chopped:

.................... <- "20 pixels"

WWWWWWW

aaaaaaaaaa

QQQQQQQQQ

LLLLLLLLLLLL

The very left part of the 7th W might still be visible. a and Q should be hidden nicely ... the last L might have part of it's leg cut off. But again, this will vary WIDELY from browser to browser. I would try it out and if it leaves parts of letters or cuts letters you might just have to accept it as on my browser it may look fine. But atleast you'll have an exact pixel cut off for each string.

What you're trying to do is difficult for a reason. The best bet is to limit it to a certain number of characters, and if it's a few less than what fills the space, it's not the end of the world.

True, i have a perfectionist problem :/

There's NO perfect layout, css, website. IMO, you need to immediately stop thinking in BOXES and go check out some of the fun creative designs out there to see how you can make cross-browser and OS websites that look awesome.

GL.