Issue with algorithm to shorten sentences

I have a webpage which displays multiple textual entries which have no restriction on their length. They get automatically cut if they are too long to avoid going to a new line. This is the PHP function to cut them:

function cutSentence($sentence, $maxlen = 16) {
    $result = trim(substr($sentence, 0, $maxlen));

    $resultarr = array(
            'result' => $result,
            'islong' => (strlen($sentence) > $maxlen) ? true : false    
        );

    return $resultarr;
}

As you can see in the image below, the result is fine, but there are a few exceptions. A string containing multiple Ms (I have to account for those) will go to a newline.

Right now all strings get cut after just 16 characters, which is already very low and makes them hard to read.

I'd like to know if a way exists to make sure sentences which deserve more spaces get it and those which contain wide characters end up being cut at a lower number of characters (p开发者_JS百科lease do not suggest using the CSS property text-overflow: ellipsis because it's not widely supported and it won't allow me to make the "..." click-able to link to the complete entry, and I need this at all costs).

Thanks in advance.

You could use a fixed width font so all characters are equal in width. Or optionally get how many pixels wide every character is and add them together and remove the additional character wont the pixel length is over a certain amount.

If the style of your application isn't too important, you could simply use a font in the monospace family such as Courier.

Do it in Javascript rather than in PHP. Use the DOM property offsetWidth to get the width of the containing element. If it exceeds some maximum width, then truncate accordingly.

Code copied from How can I mimic text-overflow: ellipsis in Firefox? :

function addOverflowEllipsis( containerElement, maxWidth )
{
    var contents = containerElement.innerHTML;
    var pixelWidth = containerElement.offsetWidth;
    if(pixelWidth > maxWidth)
    {
        contents = contents + "…"; // ellipsis character, not "..." but "…"
    }
    while(pixelWidth > maxWidth)
    {
        contents = contents.substring(0,(contents.length - 2)) + "…";
        containerElement.innerHTML = contents;
        pixelWidth = containerElement.offsetWidth;
    }
}

Since you are asking for a web page then you can use CSS text-overflow to do that. It seems to be supported enough, and for firefox there seems to be css workarounds or jquery workarounds...

Something like this:

span.ellipsis {
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
   width:100%;
   display:block;
}

If you fill more text than it fits it will add the three dots at the end. Just cut the text if it is really too long so you don't waste html space.

More info here:

https://developer.mozilla.org/En/CSS/Text-overflow

Adding a 'see more' link at the end is easy enough, as appending another span with fixed width, containing the link to see more. text will be truncated with ellipsis before that.