如何使用.dotdotdot在段落末尾显示省略号？

-1

我无法让我的省略号功能正常工作。我希望省略号出现在div news_inner（morgan，pia和gold）的每个段落的末尾。我从http://dotdotdot.frebsite.nl复制了该功能，但我无法理解配置。我如何定义我想要在每个段落中出现点的位置？建议？如何使用.dotdotdot在段落末尾显示省略号？

<!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:[email protected]">Michelle McCullough</a>. 
    </div><!--end div footer_inner--> 
</div><!--end div footer--> 
</div> <!--end wrapper div --> 

</body> 
</html>

来源

2012-10-20 user1748319

当容器空间不足时，看起来这些点会自动发生 - 所以在你的内容分区上设置一个“高度”或“最大高度”... – Basic

请做一个_testcase_。这个庞然大物的代码转储的绝大多数与这个问题无关。 –

为什么不是css ellipsis？

.your-paragraphs-selector { 
width: 100px; /* change according to your needs */ 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
}

来源

2012-10-20 21:35:21 Luca

我看到一对夫妇潜在问题：

1）当你调用.dotdotdot

您的代码有一个错字（.dotdotdot未闭）：

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

应成为：

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

2）尝试将.dotdotdot直接的元素，而不是容器的id

喜欢的东西：

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

来源

2013-02-24 15:54:11 Jason

我在项目中使用这样的，这对我来说

$(window).load(function() { 
      setTimeout(function() { 
       $('.dotEllipse').dotdotdot({ 
        ellipsis: '... ', 

        height: 100, 
        tolerance: 0 
       }); 
      }, 100); 


     });

工作正常

来源

2017-01-25 10:46:37

如何使用.dotdotdot在段落末尾显示省略号？

回答

相关问题