CODEWITHSUNDEEP
htmlcss
Mahdi Ghiasi
Mahdi Ghiasi

Reputation: 15301

Overflow:hidden dots and the end of a multiline text

I am creating a web app using ASP.NET MVC, which shows some articles to user.

And there is a summary of every article on a div.

Currently, I'm loading the whole content in summary div and set this style overflow:hidden for that. This is the result:

Current result

But that fragmentary line (last line) is ugly, also whole content is downloading to user's computer, which is bad for speed and performance.

I want to have something like this: (the image below is my goal)

Goal

(Remove that fragmentary text at last line, and add ... at the end of text)

Also it is good to avoid downloading whole content to user's computer.

How to do that?

PS: Anyone know a better title for this question?!

Upvotes: 1

Views: 3290

Answers (4)

haynar
haynar

Reputation: 6030

if you have no problem using CSS3 in terms of browser compatibility, you can use CSS to truncate the text, like in this tutorial:

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis; /* required for Opera */
    -ms-text-overflow: ellipsis;    /* required for IE8, allegedly */
    -moz-binding: url('ellipsis.xml#ellipsis');    /* for Firefox; details [here][2] */
}

Regarding mozilla firefox, here is a tutorial how to deal with it using XMLs

Upvotes: 0

rogal111
rogal111

Reputation: 5933

Put your text in another div and use height + line-height

Working example: http://jsfiddle.net/DNh4W/2/

If you want to end with ellipsis there is no solution in CSS3 for multiline text. You must use javascript, for example: http://pvdspek.github.com/jquery.autoellipsis/

Example of jquery autoellipsis: http://jsfiddle.net/bdM89/1/

Upvotes: 1

Ana
Ana

Reputation: 37179

First of all, I believe truncating the text (to a certain number of characters) and adding the ellipsis should be done on the server side.

Then, if you want to do this using only CSS, you need to simply let the height of the div be auto. It probably won't be the same for all, but it will look nice.

Upvotes: 0

Pablo Martinez
Pablo Martinez

Reputation: 2180

You can set a number of characters to show, then if text to show is bigger than the limit number, truncate:

if(text.Length > 200)
        {
            text.Substring(0, 200) + "..."; 
        }

Or if you are building the system, you can create a limited field to save a preview text and in listings show the preview text instead the big content

Upvotes: 2

Related Questions