我无法使用省略号功能。我希望省略号出现在div news_inner（morgan，pia和gold）中每个段落的末尾。我从http://dotdotdot.frebsite.nl复制了该函数，但我无法理解配置。如何定义每个段落中我想要点的位置？建议？
<!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:mkm49@pitt.edu">Michelle McCullough</a>.
</div><!--end div footer_inner-->
</div><!--end div footer-->
</div> <!--end wrapper div -->
</body>
</html>
答案 0 :(得分：1)
我发现了一些潜在的问题：
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>
答案 1 :(得分：0)
为什么不css ellipsis？
.your-paragraphs-selector {
width: 100px; /* change according to your needs */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
答案 2 :(得分：0)
我在我的项目中使用了这样的，它对我来说很好用
$(window).load(function() {
setTimeout(function() {
$('.dotEllipse').dotdotdot({
ellipsis: '... ',
height: 100,
tolerance: 0
});
}, 100);
});