Question

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

感谢您的帮助

Answer 1

我已经下载了dotdotdot并遵循了README.md，它运行正常（$(window).resize除外）。

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

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

我还没有深入研究dotdotdot脚本。我正在使用这个脚本开火：

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

我很想知道您选择的班级名称.dotdotdot是否会导致问题。也许将您的类重命名为.product-description-wrapper并在该类上运行脚本。

希望这有助于你

Answer 2

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

这是我最喜欢的两个 SASS mixins，用于实现自动换行或省略号;

@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;
}

dotdotdot即使没有被截断也会添加省略号

2 个答案: