HTML: How can i do this...!

I am developing an application where i have to display names of users in following structure :

In above structure, in the name field, it may exceed the right border of the outer <div> tag, i want to cut the name value just before it touches the right border and append the a string '...' in the end just like below

How can i make it work for UTF-8, unicode or Normal english le开发者_StackOverflow中文版tters in the name field?

P.S. I m using PHP for server side processing.

The easiest way is to set some CSS on that div...

<div style="white-space:nowrap; text-overflow:ellipsis;">Er. Christopher Allen (ChristAllenMoreTextMoreText)</div>

You have to set the white-space attribute as well, otherwise you won't ever get to this elipsis point. You should also probably set overflow:hidden.

Big caveat though! This does not work in all browsers. IE7 and beyond, Safari/Chrome, are all fine. I believe there are issues with it in Firefox though.

Edit: Here is a Firefox workaround. Not amazing though.

Since you can't know the exact width of the container on the client side (in the user's browser), you must use Javascript for this.

You can't just let it wrap?

Perfecting a server-side character limiter so it cuts off just before the line-end will be tough, if not impossible, unless using a monospace font. And you can't account for the user's browser settings, so the solution will always be flawed. If any character limiter is created, it will need to be client-side.

What about setting overflow: hidden on the name element?

I personally do mine on the back-end with PHP using the following custom function:

function trunc($string, $limit, $break=" ", $pad="...") {
    // return with no change if string is shorter than $limit
    if(strlen($string) <= $limit) return $string;

    $string = substr($string, 0, $limit);
    if(false !== ($breakpoint = strrpos($string, $break))) {
    $string = substr($string, 0, $breakpoint);
    }

    return $string . $pad;
}

Sure, it's not terribly schnazzy, and it doesn't exactly auto adjust, but my project requirments demand that everything works 100% correctly in IE6 and this works without fail.

If you HAVE to do it on the front end, try 3 dots: http://tpgblog.com/threedots/

As Brad suggested: CSS is the way to go. Flexible presentation is better handled on the client side. However, most browsers do not implement this specific CSS3 feature (yet). In the meantime you could try one of these jQuery (javascript) plugins that makes the same functionality available to all browsers.

http://plugins.jquery.com/plugin-tags/ellipsis

• http://plugins.jquery.com/project/shorten
• http://plugins.jquery.com/project/ThreeDots
• http://plugins.jquery.com/project/text-overflow
• http://plugins.jquery.com/project/AutoEllipsis

Are you using a database? If so you can write a conditional statement to check if the name is over a certain length and if so append ...

You might want to define your width in Em and then count characters PHP side to approximate where you need to cut and append your ellipses.

In effect you need to work out the pixel length of the string and keep chopping chars until it falls below the threshold. I could explain that on the server side if you had .net at hand, but you dont, so maybe a this javascript might help on the client : Truncate a string nicely to fit within a given pixel width