dotdotdot 即使未截断也添加省略号答案

【问题标题】：dotdotdot add ellipsis even when not truncateddotdotdot 即使未截断也添加省略号
【发布时间】：2016-01-14 09:29:50
【问题描述】：

我使用dotdotdot截断指定高度框中的文本

<div class="product-description dotdotdot" style="word-wrap: break-word;">
    <div class="product-description-icon">
        <span>
            <img src="product_gloves.png" alt="Gloves">
        </span>
    </div>
    <h4>Gloves</h4>
    <p>Some gloves text...</p>
</div>

jQuery :

$(".product-description.dotdotdot").dotdotdot({
    watch: true
});

我的product-description dotdotdot的最小高度为100px，文本末尾有省略号，但文本没有被截断，还有很多可用空间。

感谢您的帮助

【问题讨论】：

您使用 jquery 椭圆插件而不只是使用 CSS 是否有原因？ css-tricks.com/snippets/css/truncate-string-with-ellipsis

标签： dotdotdot

【解决方案1】：

我已经下载了 dotdotdot 并按照 README.md 操作，它工作正常（$(window).resize 除外）。

您可能需要为您的问题提供更多背景信息：

您是否以正确的顺序在标记的<head> 中包含所有必要的.js 文件？
您的 jQuery 是否包含在 $(document).ready(function() { 中 您的脚本 });

我还没有深入研究 dotdotdot 脚本。我的正是使用这个脚本触发：

$(document).ready(function() {
    $(".wrapper").dotdotdot({
        // configuration goes here
    });
});

乍一看，我想知道您选择的类名 .dotdotdot 是否会引起问题。也许将您的类重命名为 .product-description-wrapper 并在该类上运行脚本。

希望对你有帮助

【讨论】：

【解决方案2】：

我会使用 纯 CSS3 方法而不是 jQuery。

这里有两个我最喜欢的 SASS mixin 来实现自动换行或省略号；

@mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

【讨论】：