表格内容超出用省略号显示
方法一:(极不推荐 不适用响应式)
![](https://images2017.cnblogs.com/blog/1090513/201710/1090513-20171030091918480-1689988640.png)
table{ table-layout: fixed; /*固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和, 假如没有指定,则会取决于第一行每个单元格的宽度。 假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100% 。*/ } td{ white-space: nowrap; //设置内容抵达容器边界会不会转到下一行 overflow: hidden; //不显示超过对象尺寸的内容(这个绝对不能少) text-overflow: ellipsis; }
方法二:
也可以使用 js
//文字简介过长的截取操作 var introduce = $('.address'); $.each(introduce, function(i,val) { var introduce_a = $(val).text().substring(0,15)+'...'; $(val).text(introduce_a); });
方法三:
使用函数:
/* * 函数说明:截取指定长度的字符串 * utf-8专用 汉字和大写字母长度算1,其它字符长度算0.5 * * @param string $str 原字符串 * @param int $len 截取长度 * @param string $etc 省略字符... * @return string 截取后的字符串 */ if(!function_exists('ReStrLen')) { function ReStrLen($str, $len=10, $etc='...') { $restr = ''; $i = 0; $n = 0.0; //字符串的字节数 $strlen = strlen($str); while(($n < $len) and ($i < $strlen)) { $temp_str = substr($str, $i, 1); //得到字符串中第$i位字符的ASCII码 $ascnum = ord($temp_str); //如果ASCII位高与252 if($ascnum >= 252) { //根据UTF-8编码规范,将6个连续的字符计为单个字符 $restr = $restr.substr($str, $i, 6); //实际Byte计为6 $i = $i + 6; //字串长度计1 $n++; } else if($ascnum >= 248) { $restr = $restr.substr($str, $i, 5); $i = $i + 5; $n++; } else if($ascnum >= 240) { $restr = $restr.substr($str, $i, 4); $i = $i + 4; $n++; } else if($ascnum >= 224) { $restr = $restr.substr($str, $i, 3); $i = $i + 3 ; $n++; } else if ($ascnum >= 192) { $restr = $restr.substr($str, $i, 2); $i = $i + 2; $n++; } //如果是大写字母 I除外 else if($ascnum>=65 and $ascnum<=90 and $ascnum!=73) { $restr = $restr.substr($str, $i, 1); //实际的Byte数仍计1个 $i = $i + 1; //但考虑整体美观,大写字母计成一个高位字符 $n++; } //%,&,@,m,w 字符按1个字符宽 else if(!(array_search($ascnum, array(37, 38, 64, 109 ,119)) === FALSE)) { $restr = $restr.substr($str, $i, 1); //实际的Byte数仍计1个 $i = $i + 1; //但考虑整体美观,这些字条计成一个高位字符 $n++; } //其他情况下,包括小写字母和半角标点符号 else { $restr = $restr.substr($str, $i, 1); //实际的Byte数计1个 $i = $i + 1; //其余的小写字母和半角标点等与半个高位字符宽 $n = $n + 0.5; } } //超过长度时在尾处加上省略号 if($i < $strlen) { $restr = $restr.$etc; } return $restr; } }