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

adjusting the size and positioning of an image within a parent div using React

Hey everyone, I'm a newcomer to the world of React. Currently, I'm working on a website and everything seems to be falling into place nicely. However, I've encountered a little hiccup. My goal is to write code within my SCSS folder that will ...

cssreactjsnext.js

Troubleshooting: Custom JQuery function not functioning as expected

I am currently facing an issue with the jQuery in my website while trying to implement a portfolio element. It seems to be related to the changePortfolio() function, but I am unsure of how to resolve it. $('.projects a[href^="#"]').on('clic ...

javascriptjqueryfunction

The functionality of Ajax loading content will fail when the link is already loaded

I am currently using an ajax script that dynamically replaces the content of #main with the contents of a loaded page based on the clicked link. For example, clicking on rddd would replace #main with the content of about.php. However, I encountered an is ...

javascriptjqueryhtmlajax

Retrieve the most recent update timestamp of a file stored on a distant server

Is there a way to use curl to retrieve the last modified date of a file on a remote server? I'm looking for some guidance on how to accomplish this. ...

phpjquerycurl

Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs: .rightarrow{ width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #aaaaa9; } This is ...

htmlcss

Upload the image data into the input file tag

Is there a way to take a string code stored in a JavaScript variable that is retrieved from the Cropit plugin (used for cropping images) and then set this information into an input file tag? I want to be able to send it via AJAX to PHP. Here is the JavaSc ...

javascriptjqueryajaximageinput

The chosen color for the link button in CSS

PHP CODE : $getOID=$_GET["id"]; for($i=$getOID-($getOID-1); $i<=5;$i++){ echo '<a class="current" href="postlogin.php?id='.$i.'">'.$i.'</a>'; } CSS STYLING FOR BUTTONS : .pagging { height:20px; ...

cssbuttonhyperlinkselected

More efficient methods for handling dates in JavaScript

I need help with a form that requires the user to input both a start date and an end date. I then need to calculate the status of these dates for display on the UI: If the dates are in the past, the status should be "DONE" If the dates are in the future, ...

javascriptjqueryasp.netdate

Unanticipated string error triggered by setting jQuery cookie

While utilizing the jquery cookie plugin, I encountered an unexpected string error when trying to set it. jQuery('#select').change(function() { if(jQuery(this).val() == "defaultselect"){ jQuery.cookie('mycookie':'12345 ...

jquerycookies

Customizing Internationalization in Shiny Apps using DataTables Local Language Files

I'm looking to localize my datatable in shiny using an internationalization file, but I need to reference a local file on my computer as my VM has no internet connection. How can I make this work? I attempted to follow the steps outlined here . Howev ...

jqueryrshinydt

Enhance the responsiveness of a ReactJS landing page

We have developed a large React application without relying on any existing UI framework. All of our UI components have been custom-built. Now, we are looking to make the landing page section responsive within the application, which will require the imple ...

htmlcssreactjstailwind-css

Disregarding boundaries set by divisions

Trying to keep things concise here. I have a division called "the box" with a fixed width of 1200px that contains various other divisions. One of these divisions is a links bar, known as the "pink bar", which has a width of 100% and a height of 25px. My is ...

csslayoutcss-float

What to do when encountering a problem with HTML, CSS, and JS while loading a webpage from an SD card to a WebView

I am facing an issue while loading an HTML file from the SD card to a webview. The problem is that the CSS, images, and videos are not loading properly in the webview. Compatible with Android 4.4 KitKat and Chrome version Not compatible with versions belo ...

javascriptandroidhtmlcssstorage

Show the jQuery code block as HTML within a textarea

I'm in need of a way to display script reference code in a textarea for easy copying by users. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"/> Even though I am using jQuery, all the solutions I ...

jqueryhtmlinnerhtml

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

cssreactjsreact-select

What is the best way to make an element "jump to the top" when the parent element has reached its maximum height?

I have a parent div containing 6 child divs. The height of the internal divs changes dynamically based on the data. The outer div has a fixed height set. I want the internal divs to move to a new column inside the parent div when they no longer fit in term ...

htmljquerycss

Execute a function singularly upon vertical scrolling upwards or downwards

Looking for a solution to load two distinct animated graphics on a website when scrolling up or down, I managed to trigger the desired functions. However, there seems to be a bug where the functions are being triggered excessively: $(window).scroll(func ...

javascriptjquery

Change the background color of the selectInput component in Shiny to fit your

Take a look at this sample shiny app: library(shiny) ui <- fluidPage(tags$head(includeCSS("www/mycss.css")), selectInput("foo", "Choose", width = '20%', multiple = F, selected = "red1", choices = list(red = c ...

cssrshiny

What is the best way to create a tree structure in jQuery for organizing parent-child relationships within an unordered list (

Before <ul> <li parent-id="0" li-id="16">Anthropology Department</li> <li parent-id="16" li-id="18">Anthropology Faculty Collections</li> <li parent-id="16" li-id="23">Shared Collections</li> <li parent-id="0" ...

jquery

Utilizing the getJSON Method to Automatically Fill a Dropdown Selection Element

I am looking to populate a dropdown select menu with bank names and IIN numbers obtained from the following JSON: JSON Data : {"status":true,"message":"Request Completed","data":[{"id":1,"activeFlag":1,"bankName":"Union Bank of India","details":"Union Ba ...

javascriptphpjqueryjson