ASP.NET Javascript Hide/Show Read More for Long Text

So at the moment I have a literal to which I assign a value to from database. 开发者_如何学JAVAI.e an Introduction to a programme.

What I am looking to do is i.e if the text is larger than 100 Characters, to only display the first 100 Characters and then display a javascript link "Read More" which when clicked displays the rest of the content.

Any Ideas ?

Use CSS elipses is one quick easy solution:

span.ellipsis {
   text-overflow:ellipsis;
}

The other in .NET would be something like:

string YourText = "rgr";
if (YourText.Length > 100)
{
    YourText = YourText.Substring(0, 100);
    YourText += "... Read more";
}

There are a few issues with the above though, there are lots of refinements you can make but that should get you going.

Have two Literals or Labels, one of which is hidden with style="display: none" (Visible=False won't emit the HTML so you can't interact with it from Javascript) and contains the full text.

Your first label/literal ("Read more") needs to have an onclick event that does something like :
javascript:void(show(LongerText.ClientId));

show and hide are defined as:

function show(id) {
  document.getElementById(id).style.display = "block";
}

Set the text of your labels to be a cut down (substring'd) version of the text and the full text.

Should be enough to get you started, but let me know if you need anything more :)

Just to make it extra clear, the structure of the document is this:

Title of document Read more hidden text