当我的网站上的多个多行段落超过特定高度时,我试图将省略号附加到它们。为此,我正在使用 dotdotdot , jquery 插件。
奇怪的是,当我刷新页面时它不起作用。它仅在我调整窗口大小后才起作用(然后它就完美地工作了)。我已经尝试将所有脚本放在我的 html 的末尾,以便最后加载 dotdotdot,但它仍然无法正常工作。有谁知道为什么会这样?
我正在为 dotdotdot 使用这些设置:
$(document).ready(function() {
$("p.article-content").dotdotdot(
{
/* The HTML to add as ellipsis. */
ellipsis : '...',
/* How to cut off the text/html: 'word'/'letter'/'children' */
wrap : 'word',
/* jQuery-selector for the element to keep and put after the ellipsis. */
after : null,
/* Whether to update the ellipsis: true/'window' */
watch : true,
/* Optionally set a max-height, if null, the height will be measured. */
height : null,
/* Deviation for the height-option. */
tolerance : 0,
/* Callback function that is fired after the ellipsis is added,
receives two parameters: isTruncated(boolean), orgContent(string). */
callback : function( isTruncated, orgContent ) {},
lastCharacter : {
/* Remove these characters from the end of the truncated text. */
remove : [ ' ', ',', ';', '.', '!', '?' ],
/* Don't add an ellipsis if this array contains
the last character of the truncated text. */
noEllipsis : []
}
});
});
相关的 HTML 是(它很丑,我知道,我还在试验它):
<article class="article">
<div class="article-image"></div>
<h2>Title</h2>
<p class="date">December 19, 2012</p>
<p class="article-content">Lorem ipsum etc. (the actual content is larger)</p>
</article>
还有 CSS:
article {
font-size: 99%;
width: 28%;
line-height: 1.5;
float: left;
margin-left: 8%;
margin-bottom: 3em;
text-align: justify;
}
article h2 {
font-size: 125%;
line-height: 0.5;
text-transform: uppercase;
font-weight: normal;
text-align: left;
color: rgba(0,0,0,0.65);
}
.date {
margin-top: 0.3em;
margin-bottom: 1em;
font-family: 'PT Sans';
color: rgba(0,0,0,0.5);
}
.article-image {
background-image: url(http://lorempixel.com/g/400/300/city/7);
width: 100%;
height: 13em;
overflow: hidden;
margin-bottom: 1.5em;
}
p.article-content {
font-family : 'PT Sans';
color : rgba(0,0,0,0.65);
margin-bottom : 0;
height : 7em;
overflow : hidden;
}
最佳答案
遇到了类似的问题。只需将 dotdotdot 初始化放在窗口加载事件处理程序中,而不是准备好 dom。
关于javascript - dotdotdot.js 仅在调整窗口大小后有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15302438/