根據視圖寬度而不是回車或換行（\ r \ n）獲取文本中的多少行

Question

我在我的網站中實現評論系統，並且需要在超過5行後隱藏文本查看寬度爲300px，並顯示「閱讀全文」，我試過這樣做的字符串長度，但每個字符都有不同的寬度，例如500個字符的「@」（在符號）將有超過500個字符的「.」（點）在視圖寬度爲300px，並且用戶可能會使用很多回車，經過很多頭痛我認爲是不可能的，那麼我'我們去YouTube看看他們是否解決了這個問題，顯然他們做到了！

所以我的問題是如何可能的？只是引導我走向正確的方向，我會做我的研究。

注1：300px視圖寬度僅僅是一個例子，可以改變。

注2：我使用PHP，如果有關係。

注3：我認爲JavaScript解決方案可能會被用戶愚弄，但我不確定。

注4：我認爲使用基於所使用的字體的每個字符寬度的基準的，並用它來圖出它們是在特定的視圖寬度多少行唯一的解決辦法，但是，由於支持的字符數量龐大，這不是太多工作嗎？

謝謝。

Answer 1

您無法可靠地計算出會有多少條線。這取決於太多因素，比如字體，瀏覽器甚至操作系統。

只需使用css隱藏x行後的所有內容。我整理了一個快速示例：

該類隱藏除前5行之外的所有內容。

.truncated { 
    font-size: 1em; 
    line-height: 1.2em; 
    max-height: 6em; 
    overflow: hidden; 
} 

然後，只需添加一個按鈕，使用javascript刪除該類。

https://jsfiddle.net/rmwu4sL1/