CODEWITHSUNDEEP
htmlcss
Sainath Mallidi
Sainath Mallidi

Reputation: 515

limiting text to only two lines

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.

Upvotes: 15

Views: 18593

Answers (7)

Hong Tang
Hong Tang

Reputation: 11

You can assign a class name, 'text', to your HTML using the 'p' tag, and then define its behavior using CSS as shown below:

p.text {
  width: 150px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
<p class="text">Long text continues down the road into a lane and doesn't stop there</p>

This CSS code will help truncate paragraphs with more than two lines, ensuring they display neatly within a 150px width container.

Upvotes: 1

Ivan Kharkivskyi
Ivan Kharkivskyi

Reputation: 601

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

Upvotes: 0

Tobiloba
Tobiloba

Reputation: 1998

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

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

Upvotes: 0

Steve Robbins
Steve Robbins

Reputation: 13812

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.

Upvotes: 13

Drew
Drew

Reputation: 6274

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

Upvotes: 1

marissajmc
marissajmc

Reputation: 2603

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.

Upvotes: 0

user428071
user428071

Reputation:

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

Upvotes: 0

Related Questions