dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Show only first line of a paragraph

  1. #1
    Join Date
    Jun 2017
    Location
    IT
    Posts
    25

    Show only first line of a paragraph

    Dear users,

    I'm going crazy with CSS to show only the first line of a paragraph with suspension dots at the end.

    This is the paragraph:
    HTML Code:
    <p class="j cut">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    And this is the graphic:
    HTML Code:
    .j {
    text-align: justify;
    }
    
    .cut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    But so it fails the page, overtaking the horizontal screen limit and doesn't cut the text at the end of its container.

    How can I fix it?


    Thanks

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,888

    Lightbulb

    The ellipsis definition has some drawbacks.
    See: https://css-tricks.com/snippets/css/...with-ellipsis/
    and: https://davidwalsh.name/css-ellipsis

    Consider this approach ... (uses small amount of javascript)

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Ellipse </title>
    
    <style>
     .j { width: 30em; text-align: justify; }
     .show { display: inline; }
     .hide { display: none; }
     .pink { background-color: pink; }
    </style>
    
    </head>
    <body>
    <p class="j">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
     <span id="moreInfo" class="pink" onclick="toggleML('MoreInfo',this.id)">...</span>
     <span id="MoreInfo" class="hide" onclick="toggleML('MoreInfo','moreInfo')">
      Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. 
      Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
      Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </span>
    </p>
    <script>
    // For: http://www.webdeveloper.com/forum/showthread.php?364215-Show-only-first-line-of-a-paragraph&p=1508263#post1508263
    
    function toggleClass(IDS) {
      var sel = document.getElementById(IDS);
      sel.classList.toggle('hide');
    }
    
    function toggleML(IDS,info) {
      toggleClass(IDS);
      toggleClass(info);
    }
    
    </script>
    
    </body>
    </html>
    Modify as needed.
    Last edited by JMRKER; 06-13-2017 at 10:40 AM.

  3. #3
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,888
    Here is an alternate version that does not use javascript.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Ellipse </title>
    
    <style>
     .j { width: 30em; text-align: justify; }
     .hide { display: none; }
     .pink { background-color: pink; }
    </style>
    
    </head>
    <body>
    <p class="j">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
     <b class="pink" onclick="this.nextElementSibling.classList.toggle('hide'),this.classList.toggle('hide')">&hellip;</b>
     <span class="hide" onclick="this.classList.toggle('hide'),this.previousElementSibling.classList.toggle('hide')">
      Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
      commodi consequatur.    Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
      Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </span>
    </p>
    
    <p class="j">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
     <b class="pink" onclick="this.nextElementSibling.classList.toggle('hide'),this.classList.toggle('hide')">&hellip;</b>
     <span class="hide" onclick="this.classList.toggle('hide'),this.previousElementSibling.classList.toggle('hide')">
      Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
      commodi consequatur.    Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
      Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </span>
    </p>
    
    <script>
    // For: http://www.webdeveloper.com/forum/showthread.php?364215-Show-only-first-line-of-a-paragraph&p=1508263#post1508263
    
    </script>
    
    </body>
    </html>
    Note: Shows example of more than one section of more/less display.

  4. #4
    Join Date
    Jun 2017
    Location
    IT
    Posts
    25
    So, I don't need a button "view more", but by force the user can read only the first line with suspension dots. Then I don't need onclick events.

    Furthermore, I want to know why you "truncate" the first line at "magna aliqua", and how you deduce it.

    I thought so: I can load the page with html and css which I posted up, adding this javascript:
    HTML Code:
    var p = document.getElementById('my-paragraph');
    
    window.onload = function() {
    p.style.width = p.parentNode.offsetWidth + 'px';
    };
    But the problem is on window resizing or zooming, can you help me?



    Thanks

  5. #5
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,888

    Exclamation

    Quote Originally Posted by redagr View Post
    So, I don't need a button "view more", but by force the user can read only the first line with suspension dots. Then I don't need onclick events.

    Furthermore, I want to know why you "truncate" the first line at "magna aliqua", and how you deduce it.

    I thought so: I can load the page with html and css which I posted up, adding this javascript:
    HTML Code:
    var p = document.getElementById('my-paragraph');
    
    window.onload = function() {
    p.style.width = p.parentNode.offsetWidth + 'px';
    };
    But the problem is on window resizing or zooming, can you help me?



    Thanks
    I'm not sure to which suggested code you are referring.

    In your original post you asked to add the ellipsis at the END of the first sentence.
    I did so per your request. Want it somewhere else? Then move the <span> tags.

    I don't understand why you need to add the onload function. Purpose?

  6. #6
    Join Date
    May 2017
    Posts
    14
    Personally, I think this is simpler than the solutions shown above.

    Code:
    <html>
    <head>
        <style type="text/css">
            .oneline {
                height: 1em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
    <p class="oneline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </body>
    </html>
    Just CSS, just one line.

  7. #7
    Join Date
    Jun 2017
    Location
    IT
    Posts
    25
    Nothing, it does the same as my example in the first post. This because the container of <p> isn't <body>, but a simple <div> styled in a column of the page.

    So <p> overtakes all the page horizontally.


    Help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles