jquery - 如何根据字数创建动态元素高度？

当有6个或更多的单词时，我使用以下脚本通过单击来增加产品标题的高度。当字数很小时，它的工作没有问题，但是在某些标题上只有2-3篇大作的作品上却不是。我们可以更改代码以使其始终有效吗？像素？

JS：

var producttitle = jQuery(".product-view .product-shop .product-name h1");
var numWords = producttitle.text().split(" ").length;
if (numWords > 6) { jQuery(".product-view .product-name h1").css("cursor","pointer").css("cursor","hand").click(function(){
        jQuery(this).toggleClass('long-title');
    });
}

HTML：

<div class="product-name">
   <h1 itemprop="name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>

CSS：

.catalog-product-view .product-name h1.long-title {
  text-overflow: inherit;
  white-space: inherit;
}
.category-title h1, .product-name h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

在此先感谢您，我的英语不好！

最佳答案

如果您只想隐藏一些大文本并在单击时显示其余文本（或在我的示例中将鼠标悬停），则可以通过以下方式实现：

您的大块文字：

<div id="big-sentence">
    lorum ipsum dolor ismet lorum ipsum dolor ismet
 lorum ipsum dolor ismet lorum ipsum dolor
ismet lorum ipsum dolor ismet lorum
 ipsum dolor ismet lorum ipsum
dolor ismet lorum ipsum dolor
ismet lorum ipsum dolor ismet
lorum ipsum dolor ismet lorum
ipsum dolor ismet lorum ipsum
dolor ismet lorum ipsum dolor
ismet lorum ipsum dolor ismet
lorum ipsum dolor ismet lorum
ipsum dolor ismet lorum ipsum
dolor ismet lorum ipsum dolor ismet
</div>

和这样的CSS：

#big-sentence {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#big-sentence:hover {
  white-space: normal;
}

结果将如下所示：
正常状态：



在鼠标悬停时：



当然，我是在悬停时执行的，您可以通过单击鼠标来触发它。

关于jquery - 如何根据字数创建动态元素高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25814413/