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

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

如果您只是想隐藏一些大文本 block 并在单击时显示其余文本(或在我的示例中悬停)，那么您可以通过以下方式实现:

你的大文本 block :

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

结果是这样的:正常状态:

鼠标悬停时:

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