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

Question

我使用以下脚本通过在有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;
}

提前多多感谢，抱歉我的英语不好！

Answer 1

如果您只想隐藏一些大块文本并在点击时显示其余部分（或悬停在我的示例中），那么您可以通过以下方式实现：

你的大块文字：

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

结果如下： 正常状态：

并在鼠标悬停时：

当然我是在悬停时做的，你可以在鼠标点击时触发它。