0

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

3
  • cssmojo.com/line-clamp_for_non_webkit-based_browsers Commented Apr 28, 2014 at 14:33
  • Is there a chance you can gimme working fiddle because i try this and it just remove my p.more :( Commented Apr 28, 2014 at 14:37
  • 1
    Nope. You can see how it works in the examples on the page. Understanding it and then transferring it into your environment is your job … Commented Apr 28, 2014 at 14:41

1 Answer 1

0

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.

Sign up to request clarification or add additional context in comments.

2 Comments

Yea mate i have no problem to limit it by PHP, the problem is thats a code for my friend and he want to limit it by CSS / HTML ,isnt there way to limit it by width / height or something?
Currently there is no way to do this with pure CSS and add ellipsis, in a way that is compatible across all modern day browsers. At least not without using CSS "hacks" that is. Try the link that someone posted in a comment to your question. Can't guarantee that it will produce a reliable result though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.