javascript jQuery dotdotdot 插件不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15991444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery dotdotdot plugin not working
提问by ?mer Faruk Almal?
I am trying to show list of comments in a panel using dotdotdot plugin but result is not cheering:
我正在尝试使用 dotdotdot 插件在面板中显示评论列表，但结果并不令人鼓舞：
From below xhtml code:
从下面的 xhtml 代码：
<li>
<h:link value="#{Comment.commentAuthorName}: " id="goToProfileWithAuthorName"
outcome="/profile.xhtml" type="submit"
style="text-decoration:none;font-weight:bold;font-size: 11px;color: rgb(120,120,159);">
<f:param name="userId" value="#{Comment.comauthorId}"/>
</h:link>
<div id="wrapper">
#{Comment.commentText}
</div>
<br></br>
<abbr class="timeago" title="#{Comment.commentDate}"
style="color: #778899;font-size: 10px;">
</abbr>
<br/>
</li>
And below js code:
和下面的js代码：
$(document).ready(function() {
$("#wrapper").dotdotdot({
// configuration goes here
});
})
If I resolve the overflowing issue I could solve vertical size issue maybe but something is not correct about dotdotdot I guess. Let me show you one more weird thing:
如果我解决了溢出问题，我也许可以解决垂直尺寸问题，但我猜 dotdotdot 有一些不正确的地方。让我给你看一件更奇怪的事情：
As you can see, it seems div(wrapper) width value calculated correctly but text is keep overflowing. What can be the reason?
如您所见，似乎 div(wrapper) 宽度值计算正确，但文本不断溢出。原因是什么？
Thanks for helping.
谢谢你的帮助。
回答by Mohammad Adil
Try this
试试这个
div#wrapper{
word-wrap: break-word;
}
回答by MightyPork
I had a similar problem, and eventually I dropped this plugin and started using this CSS:
我遇到了类似的问题，最终我放弃了这个插件并开始使用这个 CSS：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
To get it work, you must define width.
为了让它工作，你必须定义width.
回答by ryanbrill
Based on your screenshot, I'm guessing you have more than one <div id="wrapper">. Since ID's should only be used once per page, the plugin is probably not iterating them correctly. Try changing it to a class <div class="wrapper">and update the JS to:
根据你的截图，我猜你有不止一个<div id="wrapper">. 由于 ID 应该每页只使用一次，插件可能没有正确迭代它们。尝试将其更改为一个类<div class="wrapper">并将 JS 更新为：
$(document).ready(function() {
$(".wrapper").dotdotdot({
// configuration goes here
});
})
Link to fiddle: http://jsfiddle.net/ryanbrill/RgHRs/
回答by Zachary Kniebel
Text wraps within its container, by default. If your text is not wrapping then there exists some CSS that is causing it, be it directly (e.g., white-space: nowrap) or indirectly (e.g., position: absolute). If you must explicitly set a CSS property in order to restore this default behavior, like word-wrap: break-word, then you must have some CSS property that is already affecting your text, as this is not a default requirement.
默认情况下，文本在其容器内换行。如果您的文本没有换行，则存在一些导致它的 CSS，无论是直接（例如，white-space: nowrap）还是间接（例如，position: absolute）。如果您必须显式设置 CSS 属性以恢复此默认行为，例如word-wrap: break-word，那么您必须有一些已经影响您的文本的 CSS 属性，因为这不是默认要求。
As you have stated in your comments, you have a container with position: absolute, and that will break dotdotdot.
正如您在评论中所述，您有一个带有 的容器position: absolute，这将破坏dotdotdot。
It is possible that you may be able to resolve this issue by wrapping the element in another container (within the absolutely positioned container) that has its width set to the same width as the container.
您可能可以通过将元素包装在另一个容器中（在绝对定位的容器内）将其宽度设置为与容器相同的宽度来解决此问题。
回答by antongorodezkiy
In my case dotdotdot didn't work for elements, because they were invisible initially and then were shown after tab select. So I had to move dotdotdot initialization to some onTabShownevent.
在我的情况下 dotdotdot 不适用于元素，因为它们最初是不可见的，然后在选项卡选择后显示。所以我不得不将 dotdotdot 初始化移动到某个onTabShown事件中。
回答by Jonathan Lidbeck
dotdotdot.jsdoes claim to support letter-level wrapping/breaking as you describe, if you specify letter-level wrapping:
如果您指定字母级换行，dotdotdot.js确实声称支持您描述的字母级换行/中断：
$('.my_elements').dotdotdot({ wrap: 'letter' });
However, the implementation seems buggy. You may need to have more than one word for it to work. See this example:
但是，实现似乎有问题。您可能需要使用多个单词才能使用它。看这个例子：
