What is the best way to add an ellipsis to the conclusion of a paragraph using .dotdotdot?

I'm struggling with implementing the ellipsis function on my website. My goal is to have the ellipsis appear at the end of each paragraph in the news_inner div (morgan, pia, and gold). I found the function on , but I'm having difficulty understanding how to configure it. How can I specify where I want the dots to show up in each paragraph? Any suggestions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Liquid Layout</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dotdotdot-1.5.1.js" type="text/javascript"></script>


<style type="text/css">
* {
margin: 0px 0px;
padding: 0px 0px;
}

/* MAIN WRAPPER */ 
.wrapper {
width: 90%;
margin-right: auto;
margin-left: auto;
}

/* BODY */ 
body {
background-image: url(turf.png);
}

/* HEADER */   
#header {
margin: 0px;
}

/* NAVIGATION */
#nav {
padding: 0px; 
background-color: #A60000;
overflow: hidden;
}

#nav ul {
margin-left: 5.9em;
padding: 0px 0px;
list-style-type: none;      
}

#nav li {
text-align: center;
float: left;
width: 200px;
height: 56px;
margin-right: 1.5em;
padding: .5em 0em .5em 0em;
}

#nav a {
color: #FFFFFF;
display: block;
text-decoration: none;
letter-spacing: 4px;
line-height: 50px;
font-size: 1.5em;
text-transform: uppercase; 
font-weight: bold;
font-family: Copperplate Gothic Light, sans-serif;
}

#nav a:hover {
background: #FFFFFF;
color: #A60000;
border: 3px solid #3CA0D0;
}

/* MAIN COLUMNS */
#main {
background-color: #3CA0D0;
height: 628px;
}

/* PLAYER OF THE WEEK */
#featured {
float: left;
margin-top: .5em;
margin-right: 1em;
margin-bottom: .5em;
margin-left: 1em;
border: 3px solid #A60000;
width: 28%;
height: 605px;
}

#featured img {
float: left;
padding: .5em .5em .5em .5em;
}

#featured ul {
list-style: none;
padding: .5em .5em 0em 0em;
}

#featured li {
font-family: Gill Sans, sans-serif;
letter-spacing: .05em;
line-height: 1.5em;
color: #000044;
}

#featured_main {
clear: both;
padding: 0em .5em .5em .5em;
text-indent: 1em;
text-align: justify;
font-family: Gill Sans, sans-serif;
letter-spacing: .05em;
line-height: 1.3em;
color: #000044;
}

/* LATEST NEWS */
#news {
float: left;
margin-top: .5em;
margin-right: 1em;
margin-bottom: .5em;
border: 3px solid #A60000;
width: 28%;
height: 605px;
}

h1 {
padding: .5em .5em 0em .5em;
font-size: 1em;
font-family: Tahoma, Geneva, sans-serif;
letter-spacing: 1px;
color: #000044;
}

p.morgan, p.pia, p.gold {
padding: .5em .5em 0em .5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: Gill Sans, sans-serif;
letter-spacing: .05em;
line-height: 1.3em;
color: #000044;
}

a:link {
font-size: 1em;
color: #000044;
}

a:visited {
color: #000044;
}

/* MULTIMEDIA VIDEOS */
#videos {
float: left;
margin-top: .5em;
margin-right: 1em;
margin-bottom: .5em;
border: 3px solid #A60000;
width: 37.8%;
height: 605px;
}

#videos_inner {
text-align: center;
}

p.title {
padding: .5em 0em 1em 0em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 2px;
}

/* FOOTER */
#footer {
clear: both;
background-color: #A60000;
}

#footer_inner {
text-align: center;
padding: .3em;
color: #FFFFFF;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
font-size: 15px;
}

#footer a:link {
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
color: #FFFFFF;
font-size: 15px;
}

#footer a:hover {
color: #FFFFFF;
font-size: 18px;
}

</style>

<script type="text/javascript">

$(document).ready(function() {
    $("#new_inner").dotdotdot({

});

</script>

</head>
<body>

<div id="header">
    <div class="wrapper">
    </div> <!--end div wrapper -->
</div> <!--end div header -->

<div class="wrapper">   
    <div id="nav">      
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="http://www.ussoccer.com/Teams/US-Women/Rosters/120527-Olympic-Roster.aspx">Roster</a></li>
            <li><a href="http://www.ussoccer.com/Teams/US-Women/Coaching-Staff.aspx">Coaches</a>
            <li><a href="http://www.ussoccer.com/Teams/US-Women/Schedule-Results/2012.aspx">Schedule</a></li>
            <li><a href="http://www.ussoccerstore.com/">Store</a></li>
        </ul>
    </div> <!--end div nav -->

<div id="main">
    <div id="featured">
        <img src="abby.png" alt="Abby Wambach, Forward" />

        <ul>
            <li> Name: Abby Wambach </li>
            <li> DOB: June 2, 1980 </li>
            <li> Position: Forward </li>
            <li> Appearances: 191 </li>
            <li> Goals: 146 </li>
            <li> College: University of Florida </li>
            <li> Hometown: Rochester, NY </li>

        </ul>

        <div id="featured_main">
            <p> One of the world's best players in the air, Wambach is the second all-time leading scorer in international soccer history behind only Mia Hamm (158). Wambach surpassed former U.S. WNT teammate Kristine Lilly (130) earlier in 2012 to move into second place. She has 141 goals through the group stage of the 2012 London Olympics. Wambach is a five-time U.S. Soccer Female Athlete of the Year, most recently recognized for her 2011 campaign that included eight goals and four assists. Her ability to wear down defenses with her physical play, aerial game and hard running has long been a key to the USA's success. Has developed into one of the most dangerous goal scorers in the world since debuting for the USA in 2001. Has the best goals per game ratio in U.S. history, having scored 125 goals in her 166 games through the end of 2011. Of her 125 goals, 51 have come with her head.</p>
        </div> <!--end div featured_main -->

    </div> <!--end div featured -->

    <div id="news">
        <div id="new_inner">
            <h1><a href="http://www.womenssoccerunited.com/profiles/blogs/alex-morgan-wins-sportswoman-of-the-year-award">Alex Morgan Named Team Sports Woman of the Year</a></h1>
            <p class="gold">USWNT forward Alex Morgan was awarded the Sportswoman of the Year Award (Team Sport) last night at the 33rd Salute to Women in Sports Gala in New York. The prestigious award was given to Alex Morgan for her exceptional performances in a team sport over a 12 month span. During the past 12 months, Alex Morgan has proved herself to be an indispensable part of the US Women's National Soccer Team. 

            <h1><a href="http://www.ussoccer.com/News/Womens-National-Team/2012/08/Pia-Sundhage-to-Return-Home-to-Pursue-Opportunities-in-Sweden.aspx">Head Coach Pia Sundhage Resigns</a></h1>
            <p class="pia">U.S. Women’s National Team head coach Pia Sundhage has decided to return home to pursue opportunities in Sweden. “After the Olympics we had discussions and early in the process it became clear that Pia was very interested in returning home to Sweden,” said U.S. Soccer President Sunil Gulati. “It certainly wasn’t an easy decision for U.S. Soccer or Pia. She deserves a tremendous amount of credit for the amazing success the U.S. Women’s National Team had during the past five years. On behalf of U.S. Soccer, we sincerely appreciate Pia’s hard work, dedication and commitment to the organization. We wish her all the best in the future.”</p>


            <h1><a href="http://www.ussoccer.com/News/Womens-National-Team/2012/08/US-WNT-vs-Japan-Gold-Medal-Match.aspx">U.S. Women Win Fourth Olympic Gold</a></h1>
        </div> <!--end div news_inner -->
            <p class="gold">The U.S. Women’s National Team captured the gold medal at the 2012 London Olympics with a 2-1 victory against Japan in front of a crowd of 80,203 at the famed Wembley Stadium. U.S. midfielder Carli Lloyd, the gold medal hero of the 2008 Olympics, led the way once again with both goals for the United States as they upended 2011 FIFA Women’s World Cup champion Japan and captured their third-consecutive Olympic championship.</p>       
    </div> <!--end div news -->

    <div id="videos">
        <div id="videos_inner">
            <p class="title">Multimedia Highlights</p>
            <iframe width="450" height="253" src="http://www.youtube.com/embed/Nd3udbFc5tw" frameborder="0" allowfullscreen></iframe> <br /> <br />

            <iframe width="450" height="253" src="http://www.youtube.com/embed/7a4rNNXOOjY" frameborder="0" allowfullscreen></iframe>
        </div> <!--end div videos_inner -->
    </div> <!--end div videos -->
</div> <!--end div main -->

<div id="footer">
    <div id="footer_inner">
        For more information about the U.S. Women's National Team, contact <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0305035a572e1e071a1a400b0a1b">[email protected]</a>">Michelle McCullough</a>
    </div><!--end div footer_inner-->
</div><!--end div footer-->
</div> <!--end wrapper div -->

</body>
</html>
jquerycss

Answer №1

Upon reviewing the code, I have identified a couple of potential issues:

1) It seems there is a typo in the call to .dotdotdot function.

The current code (.dotdotdot is not properly closed):

$(document).ready(function() {
    $("#new_inner").dotdotdot({
});

This should be corrected to:

$(document).ready(function() {
    $("#new_inner").dotdotdot();
});

2) Consider applying .dotdotdot directly to the elements rather than the container ID.

You can modify the code like this:

<script type="text/javascript">
    $(document).ready(function() {
        $(".dotdotdot").dotdotdot({
            ellipsis: '... ',
            height  : 75
        });
    });
</script>
<div id="new_inner">
    <h1>
        <a href="http://www.womenssoccerunited.com/profiles/blogs/alex-morgan-wins sportswoman-of-the-year-award">Alex Morgan Named Team Sports Woman of the Year</a>
    </h1>
    <p class="gold dotdotdot">USWNT forward Alex Morgan was awarded the Sportswoman of the Year Award (Team Sport) last night at the 33rd Salute to Women in Sports Gala in New York. The prestigious award was given to Alex Morgan for her exceptional performances in a team sport over a 12 month span. During the past 12 months, Alex Morgan has proved herself to be an indispensable part of the US Women's National Soccer Team. 
    <h1>
        <a href="http://www.ussoccer.com/News/Womens-National-Team/2012/08/Pia-Sundhage-to-Return-Home-to-Pursue-Opportunities-in-Sweden.aspx">Head Coach Pia Sundhage Resigns</a></h1>
    <p class="pia dotdotdot">U.S. Women’s National Team head coach Pia Sundhage has decided to return home to pursue opportunities in Sweden. “After the Olympics we had discussions and early in the process it became clear that Pia was very interested in returning home to Sweden,” said U.S. Soccer President Sunil Gulati. “It certainly wasn’t an easy decision for U.S. Soccer or Pia. She deserves a tremendous amount of credit for the amazing success the U.S. Women’s National Team had during the past five years. On behalf of U.S. Soccer, we sincerely appreciate Pia’s hard work, dedication and commitment to the organization. We wish her all the best in the future.”</p>
</div>

Answer №2

What's wrong with using the ellipsis property in CSS?

.your-selector-for-paragraphs {
width: 120px; /* adjust as necessary */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Answer №3

This code snippet was really helpful in my recent project, and it executed perfectly for me

$(document).ready(function() {
    setTimeout(function() {
        $('.ellipsisDots').dotdotdot({
            ellipsis: '... ',
            height: 120,
            tolerance: 5
        });
    }, 200);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The font background color appears to be malfunctioning

body { margin: 0; background-color: white; background: linear-gradient(to right, #000000, #ffffff, #ffffff, #000000); line-height:25px; } h2{ color: black; text-align: center; display: block; font-family: 'Montserrat', san ...

htmlcssbackground-color

Does the media query max-width refer to the size of the viewport or the size of the window?

Can someone clarify whether the max-width in a media query is based on the viewport size or window size? For instance, consider this media query: @media screen and (max-width: 360px){} Would this media query be activated when the viewport reaches 360px ...

cssmedia-queriesviewport

How can I modify the container to prevent the Bootstrap dropdown from being clipped by overflow:hidden settings?

With bootstrap, I encountered a situation where dropdown menus are being clipped by my <div> with overflow: hidden. How can I address this issue without incurring high costs? One potential solution might be to change the container of all dropdowns wi ...

htmlcsstwitter-bootstrap

checkbox toggling event triggering twice

I have been working on an application that allows users to register for university courses. They can select their registration type, course type, batch, and subjects. The subjects are displayed in a table based on the selected course type and batch. Users ...

javascriptjqueryhtmlajax

jQuery no longer waits for all deferreds to resolve once it is done

Currently, I am working with multiple Backbone.js models that need to be fetched, and I want to execute a callback function once all the fetches have completed. One specific model needs to be fetched before the others so that its id can be retrieved. The c ...

jquerybackbone.jscoffeescript

changing up the format of nested blockquotes

My website includes various text features, which means that nested blockquotes are a possibility. I am now curious if it is feasible to style nested blockquotes differently from each other! blockquote{ background-color:#666; color:#fff; border ...

javascriptjqueryhtmlcss

Conceal one element and reveal a different one upon submitting a form

On a web page, I want to hide the form upon submission (either by clicking or pressing enter) and display the results. However, this functionality does not seem to work when the Go web server is running. When I test the HTML file (without executing the Go ...

javascriptjqueryajaxgo

tips on locating the next immediate downloadable cell in a table

My table includes cells with colspan and rowspan attributes. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table border=1 id="mytable" > <tr><td>A1</td> <td> A2 < ...

javascriptjqueryhtmldomhtml-table

Changing selections in jQuery may not work properly on certain mobile and IE browsers

I am currently working on creating a dependency between two select boxes. The jQuery code I have implemented works perfectly on most common browsers such as Chrome and Firefox, but it seems to have some issues with Internet Explorer, Edge, and some mobile ...

javascriptjqueryhtmlcss

Variation in element widths and CSS widths

While inspecting an element in FF, it displays a width of 225px. However, the applied CSS sets the width to 207px for this element. The discrepancy may be due to Bootstrap and varying resolutions. Is there a tool available to identify chang ...

csstwitter-bootstrapwidth

Display the item with jQuery once the CSS generated by jQuery has finished loading

Is it possible to delay the visibility of an object until my script finishes loading? I tried using ajaxcomplete() and ajaxSuccess() without success. Check out the code snippet below for an example. There's an image with the id: imagefocus. Whenever ...

jquerycssajax

Issue with using the character '#' in a JSON as a parameter in $AJAX URL

I have encountered an issue with the following JQuery ajax call where a JSON parameter is being truncated on the server if LoadFileSeperator = '#'. Despite this, the code works fine otherwise. What can I do to encode LoadFileSeperator in a way t ...

jqueryjsonajax

Matching Figures to their Descriptions

I am currently working on a website and looking to include images with captions that display the price of each item underneath. The issue I'm facing is that the captions are aligning horizontally instead of vertically. Can anyone provide assistance wi ...

htmlcssalignmentfigurecaption

Text that disappears upon clicking on show/hide按钮

Could someone please help me figure out how to prevent the "See more" text from disappearing when clicked in the example below? I want it to stay visible. Thank you! ...

javascripthtmlcss

Moving the element from the right side

Is there a way to change the direction of this element's transition from left to right, so that it transitions from right to left smoothly without any gaps between the element and the edge of the page? @keyframes slideInFromRight { 0% { trans ...

css

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

What is the best way to format the JQGrid table for better

Is there a way to indent the table in this example and create white space on the side of the rows and header? I want a white margin on the left of everything below "Stackoverflow example". I'm hoping to achieve this using only CSS. Below is the code ...

cssjqgrid

jquery selector targeting a select optiongroup that contains a specific label value

In my code, I have a select multiple with option groups: <select _ngcontent-oeq-14="" class="form-control" id="category-select" multiple=""> <optgroup label="grocery products"> <option>meat</option> <option>dai ...

jqueryhtmlselectjquery-selectorsselector

The jQuery form validation feature surprisingly doesn't take into account the value of the submit button

I have implemented jQuery form validation from Here is an example from demo.html <form id="form-signup_v1" name="form-signup_v1" method="get" class="validation-form-container"> <div class="field"> <label for="signup_v1-username">Fir ...

javascriptjqueryhtmlforms

What is preventing me from translating an element using transform: translateY()?

I attempted to move the letter 'h' down by 40px on its own, but the translation only seems to work if I relocate the entire word. I also experimented with positioning 'h' absolutely relative to the parent element, but then 'ello&ap ...

htmlcss