css篇文本省略号显示

首先了解css属性white-space

p
  {
  white-space: nowrap  //规定段落中的文本不换行
  }

在我们的工程中经常要遇到的问题就是文本超出我们规定盒子的尺寸那么我们就要用到white-space 属性

//在一行显示的
box {  
  white-space:nowrap;/* 规定文本是否折行 */  
  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
  text-overflow: ellipsis; /* 规定超出的内容文本省略号显示 */
}
// 折行显示的
box{      
  overflow: hidden;      
  text-overflow: ellipsis;      
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */      
  -webkit-line-clamp: 4; /* 控制最多显示几行 */      
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */    
}
//表格版
table{
    width:30em;
    table-layout:fixed;                 /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
    width:100%;
    word-break:keep-all;             /* 不换行 */
    white-space:nowrap;       
    overflow:hidden;                
    text-overflow:ellipsis;          
}