开发者

limiting text to only two lines

I want to limit the tex开发者_StackOverflowt 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.


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.


If your message is a string, you can do the following with PHP:

$stringChunkArray = str_split($string, 45); // 45 = desired char count
foreach ($stringChunkArray as $line) {
    echo $line.PHP_EOL;
}

That will guarantee 45 chars per line...


Have you tried wrapping each line in a <span style="white-space: nobreak;">...</span> to force it from not wrapping?

Some documentation can be found here


It's standard behaviour of table cells to stretch to fit their content. Breaking words depending on the width of a cell would require scripting.

overflow:hidden just cuts off the rest of the words and is not supported in Outlook 2007/2010.


This worked for me, just adjust the height as you wish.

blog_content  {
    display: inline-block;
    border: 0px;
    height: 600px;
    overflow: hidden;
}


Use overflow: hidden, text-overflow: ellipsis and fixed height.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜