CSS paragraph break with “read more”

  • Author
    Posts
  • #399862

    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.

    #399972

    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

    #399974

    kothea
    Member

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

    #400134

    kothea
    Member

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

    #400176

    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).

    #400180

    kothea
    Member

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

    #400181

    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

The topic ‘CSS paragraph break with “read more”’ is closed to new replies.