CODEWITHSUNDEEP
htmlcss
user3009924
user3009924

Reputation: 59

CSS - text-overflow: ellipsis fixing

i am using text-overflow: ellipsis to make max number of lines in my container article. It works fine but limit start after 1 line and i need to set it on more. (like 3-4) problem is how ever i try it it move everything in my article container away or made no change.

I am new in CSS so i am prolly doing something wrong, can u help me with that?

DEMOs: Fiddle LIVE WEBSITE

Part of CSS with ellipsis (full CSS / HTML can be found on demos above):

#article-container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 168px;
}

#article-container p.more {
    overflow: hidden;
    padding: 0;
    white-space: normal;
    width: auto;
}

So guys is here anyone who can help me to set it to limit more lines not just one?

Thanks for reading this post

Upvotes: 0

Views: 159

Answers (2)

Vikestart
Vikestart

Reputation: 55

You can't do more than 1 line with CSS (at least not in a way that is compatible with most browsers), but you can trim it using PHP if you don't want to use Javascript.

<?php
function Truncate($string, $length=50, $stopanywhere=false) {
    if (strlen($string) > $length) {
        //limit hit!
        $string = substr($string,0,($length -3));
        if ($stopanywhere) {
            //cut off anywhere
            $string .= '...';
        } else{
            //cut off after word
            $string = substr($string,0,strrpos($string,' ')).'...';
        }
    }
    return $string;
}
?>

Define $string with your text, the text that you want limited.

Upvotes: 0

Bob Brinks
Bob Brinks

Reputation: 1392

Elipse in CSS currently only does 1 line. There're a few javascript libraries that will help you accomplish what you want. http://dotdotdot.frebsite.nl/ for example.

Upvotes: 1

Related Questions