在Bootstrap中將列數據寬度限制爲固定大小3

我使用Bootstrap 3響應表來顯示數據。如下圖所示在Bootstrap中將列數據寬度限制爲固定大小3

enter image description here

但是，一列的是具有巨大的數據進行比較，以列的其餘部分，但我想顯示描述的有限長度。總之，I would like to display first 2 to 3 lines of data [or 300 characters] and followed by .....

如果可能的話，將鼠標懸停在說明欄應該顯示完整描述爲tooltip

如何實現這一目標？

來源

2013-12-16 Reddy

它真的是bootstrap 3的問題嗎？我認爲你應該爲你的數據做一個子字符串來獲得300個字符，並且用一個標題[|| popover || tooltip]屬性和你的完整描述。 – pbenard

在錶行上設置最大高度，然後使用CSS省略號屬性顯示修剪數據（不需要JS/Jquery）。

http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

數據時自動重載錶行和顯示點它會修剪。您可以在工具提示上顯示完整數據，只是包裝數據或使用工具提示查看更多信息。你可以通過接受答案來感謝我。

CSS：

適用於標籤類MYTABLE和使用CSS：

.mytable tbody tr td{ 
    max-width:200px; /* Customise it accordingly */ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

來源

2013-12-16 08:30:03 ravisuhag

對不起，我沒有太多的UI開發。請舉個例子嗎？ :) – Reddy

我試過這樣的東西 $ {record.attributes.P_Description} .ellipsis { white-space：nowrap; 溢出：隱藏; text-overflow：ellipsis; -o-text-overflow：ellipsis; } 但沒有工作 – Reddy

檢查更新的答案 – ravisuhag

把你的文字$string變量，然後使用：

$short_string = (strlen($string) > 300) ? substr($string,0,300) : $string;

這將檢查你的文字如果它超過300個字符，那麼這會給你前300個字符。
或者使用此代碼在新的短字符串末尾添加'...'。

$short_string = (strlen($string) > 300) ? substr($string,0,300).'...' : $string;

來源

2013-12-16 08:30:14 osyan

不允許您顯示整個文本作爲示例。但我不知道爲什麼一個人冷靜下來？ –

在Bootstrap中將列數據寬度限制爲固定大小3

回答

相關問題