如何根據字數創建動態元素高度？

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

非常感謝提前和我的英語不好對不起！

來源

2014-09-12 Alexandros

請爲你的html元素和相關的css添加代碼 – MSTannu 2014-09-12 18:23:03

我不確定我是否理解你想要的......但是如果是在詞語太長時調整你的標題，請考慮使用相對字體大小，或者隨着容器的尺寸縮小。嘗試類似'vw'或'vmin' - 'font-size：5vw' – LcSalazar 2014-09-12 18:31:01

你可以使用[''jQuery Bigtext Plugin'']（http://www.jqueryscript.net/demo/Dynamically-Resize-Text- Size-To-Fit-Container-Size-jQuery-Bigtext-Plugin /） – Hamix 2014-09-12 18:45:00

如果你只想隱藏文本的一些大的塊，並顯示它在點擊的休息（或在我的例子懸停），那麼你可以做到這一點的東西是這樣的：

你的文本塊大：

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

其結果將是這樣的：正常狀態：

enter image description here