twitter-bootstrap 在 Bootstrap 3 中将列数据宽度限制为固定大小
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20605278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Limiting the column data width to fixed size in Bootstrap 3
提问by Reddy
I am using Bootstrap 3 responsive tables for showing the data. However, One of column is having huge data compare to rest of the columns as shown below
我正在使用 Bootstrap 3 响应表来显示数据。但是,其中一列与其余列相比具有大量数据,如下所示


But I would like to display limited lengthof description.
In short, I would like to display first 2 to 3 lines of data [or 300 characters] and followed by .....
但我想显示有限的描述长度。简而言之,I would like to display first 2 to 3 lines of data [or 300 characters] and followed by .....
If possible, hovering over the description column should show complete description as tooltip
如果可能,将鼠标悬停在描述列上应显示完整的描述为 tooltip
How do I achieve this?
我如何实现这一目标?
回答by ravisuhag
Set up maximum height on Table row and then Use CSS ellipsis property to show trim data (No JS/Jquery required).
设置表格行的最大高度,然后使用 CSS 省略号属性显示修剪数据(不需要 JS/Jquery)。
http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
It will trim when data overloads the table row and show dots automatically. You can show full data on tool tip just wrapping your data or view more with tool tip. You can thank me by accepting answer.
当数据超载表格行并自动显示点时,它将被修剪。您可以在工具提示上显示完整数据,只需将您的数据包装起来,或使用工具提示查看更多信息。你可以通过接受答案来感谢我。
CSS:
CSS:
apply a class mytable on tag and use this css:
在标签上应用一个类 mytable 并使用这个 css:
.mytable tbody tr td{
max-width:200px; /* Customise it accordingly */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
回答by osyan
Put your text in $stringvariable, then use:
将您的文本放入$string变量中,然后使用:
$short_string = (strlen($string) > 300) ? substr($string,0,300) : $string;
This will check your text and if it's over 300 character then this will give you the first 300 characters.
Or use this code to add '...' at the end of your new short string.
这将检查您的文本,如果它超过 300 个字符,那么这将为您提供前 300 个字符。
或者使用此代码在新短字符串的末尾添加“...”。
$short_string = (strlen($string) > 300) ? substr($string,0,300).'...' : $string;

