[前端]多余文字显示省略号

  在前端的排版中,经常遇到需要对指定宽度内的文字在超出一定的长度后用省略号显示,这个完全可以利用css来控制。

1 span{
2     width:100px;  /*显示宽度*/
3     white-space: nowrap;   /*规定段落中的文本不进行换行*/
4     overflow: hidden;    /*超出部分不显示*/
5     text-overflow: ellipsis;    /*文本超出部分显示为省略号*/
6 }

  说到这里,经常遇到有时碰到给table布局中的部分列设置超出后省略显示,而经常在遇到的width没法对宽度进行设置,内容往往被td里的实际内容宽度而撑开,找来找去,终于还是找到了一个控制的方法,即table-layout。

  table-layout用来设置表格的布局算法,默认的为列宽度由单元格内容设定,因此设置值为 fixed,表示列宽由表格宽度和列宽度设定。这样我们就可以对列宽进行设置。

posted @ 2017-02-07 15:56  jeyfang  阅读(2163)  评论(0编辑  收藏  举报