4

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 (please 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.

Oliver Salzburg
  • 21,652
  • 20
  • 93
  • 138
kettlepot
  • 10,574
  • 28
  • 71
  • 100
  • what you are doing is not best practice... PHP does not know anything about the UI and how it is styled, that is why it cant calculate the best text width... use CSS / Javascript. Adding the link for 'see more' is another story unrelated to your question. – Marino Šimić Jul 06 '11 at 13:15
  • Also note that you seem to be handling UTF-8 code and don't have anything in place to avoid cutting of the String in mid-codepoint. Actually, come to think of it: with combining characters such a task is *definitely* non-trivial in a general sense. – Joachim Sauer Jul 06 '11 at 13:22

4 Answers4

3

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.

Sebastian
  • 86
  • 3
  • Your 2nd option is problematic. There's a difference between browsers and it might lead to errors. – kettlepot Jul 06 '11 at 12:04
  • @Garbriele: and that is **exactly** the reason why you should not attempt to do it on the server side: you either need to be *overcareful* (i.e. cutting off more than necessary in many cases) or live with the fact that some text will still overflow. – Joachim Sauer Jul 06 '11 at 13:20
  • I ended up finding that using a monospace font is the best solution. Since this page has to work perfectly with old browsers and javascript disabled, I'll just use the monospace font as a fallback, and replace it using jQuery if available – kettlepot Jul 06 '11 at 15:19
1

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

Landric
  • 271
  • 1
  • 6
  • 22
1

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;
    }
}
Community
  • 1
  • 1
tskuzzy
  • 35,812
  • 14
  • 73
  • 140
  • I have to use PHP only, sorry. – kettlepot Jul 06 '11 at 12:34
  • Do you have a specific reason why? That seems like an odd restriction considering the task at hand and the technology available. – tskuzzy Jul 06 '11 at 12:35
  • It's because this website is going to be used by many clients with a high chance of running an old browser or having javascript disabled. – kettlepot Jul 06 '11 at 15:11
  • Judging from the images you posted, it looked like you were designing some kind of Web 2.0 application and naturally assumed the presence of Javascript. – tskuzzy Jul 06 '11 at 16:24
-2

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.

Marino Šimić
  • 7,318
  • 1
  • 31
  • 61