設置DIV高度，以便文本不被水平切割或切片

是否有任何JS/CSS/jQuery魔術我可以確定div中內容的最後一個可見位是否被切斷，並略微增加/減少DIV高度，以防止文字切斷？設置DIV高度，以便文本不被水平切割或切片

我們的系統允許用戶輸入包含XHTML的「元素」（使用Telerik Edit控件）。我們有一個ElementList頁面，在這裏我們顯示所有用戶輸入的元素。但是，由於用戶輸入的XHTML可能非常大，因此在列表頁面上我們只想顯示每個的前三行。所以我將包含XHTML的DIV設置爲等於3行文本的特定高度，並設置overflow：hidden。到現在爲止還挺好。

但是，由於用戶可以輸入XHTML，他們可以使用填充（或以其他方式偏離標準文本高度）創建表格。由於高度和溢出的組合，這些單元格內的文本似乎被水平切掉：隱藏。我們的要求人不喜歡這個樣子;但是我們當然不能限制最終用戶可以編輯的XHTML。

Here is a JSFiddle example的問題。

這個問題是不是重複：

「Stopping cut off text in variable height div...」爲這個問題涉及到「的webkit行鉗」，這是不相關的我的情況。（並且在任何情況下，該問題從未得到回答）
「Cut text by height, no truncate」因爲該問題是關於包含純文本的DIV;我的DIV包含XHTML。你會在JSFiddle中注意到我已經使用em測量來確定DIV高度了。

這個問題讓我完全困惑 - 我希望SO社區能夠幫助我！

UPDATE：

最終，我懷疑這不能用HTML/JS/jQuery的解決。事實上，你可以製作一張桌面（或一系列DIV），並逐漸增加頂部邊距，這樣就無法避免至少切掉其中一個。

感謝所有人的迴應。我將其中一個標記爲答案，因爲在我看來，這是一個特別簡單/優雅的解決方法。

來源

2012-03-19 mikemanne

你真的必須使用'高度：3.5em;在容器上'？如果你刪除它並讓瀏覽器定義div高度怎麼辦？ – bfavaretto 2012-03-19 19:35:49

@bfavaretto - 不幸的不是。如問題所述，DIV的全部內容可能比我們在查看列表中的項目時想要看到的大得多。換句話說，我們必須限制DIV的高度。 – mikemanne 2012-03-19 19:44:59

所以你只想改變高度，如果文本比塊「稍」大一些，那是正確的嗎？ – 2012-03-19 19:59:19

這是不是你要找的解決方案，但它可能是一個不錯的設計解決方法。我把一個白色漸變div的底部，所以它創建不大不小的「視覺省略號」

看看的：http://jsfiddle.net/robertofrega/LkYjs/3/

它不像文本時簡單地切斷一樣醜陋。

來源

2012-03-19 20:13:53

感謝您的快速響應。你是對的，它沒有具體解決我的問題，但它是一個優雅（並且快速實施）的解決方法。我會試着將這種方法「賣」給我的需求人。謝謝！ – mikemanne 2012-03-19 20:18:23

告訴我們它是否工作:-) – 2012-03-20 05:42:22

這個工作，但背景必須是白色的。 – 2015-10-06 13:08:17

您的問題來自overflow:hidden;。這條線正在做你說的要做的事，即隱藏溢出。你可以使用overflow-y: auto或類似的東西？與一個尷尬（如SO在其文本區域使用）一起，應該幫助你。

來源

2012-03-19 19:40:19

感謝您的快速響應！不幸的是，我可能會遇到overflow：hidden，因爲客戶端的UI策略排除了任何滾動項目（整個頁面的瀏覽器滾動條除外）。 – mikemanne 2012-03-19 19:47:12

而不是溢出：隱藏，您可以將其設置爲自動，然後檢查提交內容時是否存在滾動條。看到這個線程：

detect elements overflow using jquery

來源

2012-03-19 19:46:41

感謝您的回覆。然而，問題不在於隱藏的內容 - 這是已知的和預期的。問題是給定的文本行有時會部分隱藏（水平切片）。也許我錯過了一些東西，但我不認爲簡單地比較scrollHeight和clientHeight會幫助我解決這個問題。 – mikemanne 2012-03-19 20:12:23

順便說一句：scrollHeight-to-clientHeight比較工作正常，即使溢出：隱藏。它不依賴於通過溢出實際顯示滾動條：auto。只是一個FYI，如果你想在溢出時使用你的引用技術：hidden div。 :) – mikemanne 2012-03-19 20:13:47

哦酷 - 謝謝你的頭。我想如果文本被切斷，溢出被設置爲自動，滾動條將被檢測到，然後可以通過jQuery調整高度。 – 2012-03-19 21:21:49

嘗試CSS3屬性：text-overflow並將其設置爲ellipsis，默認值是clip

來源

2012-03-20 16:18:01 FoxKllD

感謝您的迴應。我以前使用過省略號 - 但我認爲它不會阻止文本行出現「切片」。相反，它只是一些視覺提示，某些文本已被截斷。另外，當我上次使用省略號時，它僅在IE中受支持。 – mikemanne 2012-03-22 16:08:22

快速提示：最新版本的Firefox（11.0）似乎支持省略號CSS指令。 – mikemanne 2012-03-27 13:39:56

設置DIV高度，以便文本不被水平切割或切片

回答

相關問題