6

我使用 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，文本末尾有省略号，但文本没有被截断，还有很多可用空间。

谢谢您的帮助

4

2 回答 2

0

我已经下载了 dotdotdot 并遵循了 README.md 并且它工作正常（除了 on $(window).resize）。

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

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

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

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

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

希望这可以帮助你

于 2016-01-25T22:28:40.953 回答
0

我会使用纯 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;
}
于 2016-01-27T12:45:49.433 回答