html - limiting text to only two lines

Question

I want to limit the text to a fixed number of lines for a table of 150px width in html email, for example:

Long text continues down the road into a lane and doesn't stop there

I want it to look like this:

Long text continues down 
the road into a lane and...

I am truncating the string for a max of 45 characters including ellipsis, but sometimes when a long word is present it goes to three lines:

Long text continues at
accelerating speed into the
road...

Ideally I would like to break the word accelerating or rather fill as many characters it can in the first line and continue to second line, is there a way to do this in html? (I looked at the word-wrap but apparently it is not supported in all email clients)

Also since this is email clients, I can't do any javascript etc. also.

Answer 1

CSS Solution

You could set a height and do overflow hidden.

span {
    display: inline-block;
    border: black 1px solid;
    width: 300px;
    height: 40px;
    overflow: hidden;
}

Example: http://jsfiddle.net/imoda/REs2Q/

---

PHP Solution

The server sided alternative is to use substr

<?php

    $string = "Oh squiggly line in my eye fluid. I see you lurking there on the peripheral of my vision. But when I try to look at you, you scurry away. Are you shy, squiggly line? Why only when I ignore you, do you return to the center of my eye? Oh, squiggly line, it's alright, you are forgiven.";

    echo charlimit($string, 100);

    function charlimit($string, $limit) {

        return substr($string, 0, $limit) . (strlen($string) > $limit ? "..." : '');
    }

?>

Example: http://codepad.org/OetkaMh6

This will output 100 characters of the string then append ... Trick with this is you'll have to change the number of characters to what works best for your situation. Because it's server sided, it won't know how many characters it takes in each scenario to trigger only one carriage return.

Alternatively, you can limit the number of words:

<?php

    $string = "Oh squiggly line in my eye fluid. I see you lurking there on the peripheral of my vision. But when I try to look at you, you scurry away. Are you shy, squiggly line? Why only when I ignore you, do you return to the center of my eye? Oh, squiggly line, it's alright, you are forgiven.";

    echo wordlimit($string, 20);

    function wordlimit($string, $limit) {

        $overflow = true;

        $array = explode(" ", $string);

        $output = '';

        for ($i = 0; $i < $limit; $i++) {

            if (isset($array[$i])) $output .= $array[$i] . " ";
            else $overflow = false;
        }

        return trim($output) . ($overflow ? "..." : '');
    }

?>

Example: http://codepad.org/WYJFPaD5

But it's the same thing, you have to tailor it to "best fit"

Hope that helps.