Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

CSS paragraph break with "read more"

  1. kothea
    Member

    I'm trying to customise my blog...no code available to view yet. So I'll do my best to summarise here.

    I'm stuck tho.

    I have a fixed size div container. In that container I have text. Often the text is too big for the container, so I want to be able to break that text with "read more" link. I had intended that read more link to then call another page where the large amount of text is handled differently. I WANT the read more link as I want to encourage the user to click/interact.

    Is there any way in CSS to truncate or hide a piece of text and then have some functionality to display all the text. Do I have to use java (if so how/where). Can I do it all in one html page or do i have to add two? Or what is the right name for what I am trying to do and I can search the net (obviously "read more" brings up a few million results!!!)

    I just need to know where the solution lies..I sort of understand how i need to make the container's height flexible.

    The blog I need help with is blog.kothea.com.

  2. kothea
    Member

    i think I've answered my own question. In your one html page add the following:

    A. the style Bit (you can move it after you get it to work)
    ------------------------
    <style type="text/css">
    a.hid {color:#000; text-decoration:none; outline-style:none;}
    a.hid em {display:none;}
    a.hid:hover {text-decoration:none;}
    a.hid:active, a.hid:focus {background:#fff;}
    a.hid:active span, a.hid:focus span {display:none;}
    a.hid:active em, a.hid:focus em {display:block; color:#555; width:100%; font-style:normal; cursor:default;}
    .clear {clear:both;}
    </style>

    B. the content bit
    ----------------------------

    <p><a class="hid"
    href="#more"
    onclick="this.hideFocus=true"
    onblur="this.hideFocus=false">
    <span>Read More »</span>
    Lorem ipsum dolor </p>

    sorted

  3. kothea
    Member

    for completeness
    </style> is before the <head>

  4. kothea
    Member

    PPS
    Google Chrome
    and
    Apple Safari appear to have problems with this working.

  5. devblog
    Member

    It seems you're doing this for your website and not your blog. WordPress doesn't allow JavaScript.

    Do I have to use java (if so how/where).

    Java and JavaScript are two different things. Java is a programming language, JavaScript is a scripting language. In web technologies, Java, like C# or PHP, runs on the server. JavaScript runs on the client (web browser).

  6. kothea
    Member

    I am doing on both but that'll be why it doesn't work on the blog I guess !

  7. kothea
    Member

    my plan is
    a. get blog and web site visually similar
    b. migrate blog to self hosted and then make very very visually similar - guess i can introduce that functionality then

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags