Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

limiting text to only two lines

Tags:

html

css

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.

like image 465
Sainath Mallidi Avatar asked Aug 30 '11 05:08

Sainath Mallidi


People also ask

How do I restrict text from one line?

If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.

How do I make text not break to the next line?

you have set width : 100px; in your css, so if the line's width is more than 100px it will break the text into several lines, so may be you dont need to set width. or you can use white-space:nowrap; property. I must have list items be of fixed width.

How do I limit the number of lines in CSS?

The max-lines property limits the content of a block to a maximum number of lines before being cut off and can create a line clamping effect when combined with block-overflow . In fact, both properties make up the line-clamp property, which is a shorthand for combining them.


2 Answers

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.

like image 128
Steve Robbins Avatar answered Nov 11 '22 13:11

Steve Robbins


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

like image 34
Drew Avatar answered Nov 11 '22 12:11

Drew