css 如何将多出文本变成...

单行显示:

{
   width: 200px;
   text-overflow: ellipsis;  /* 将文本溢出显示... */
   overflow: hidden; /* 超出隐藏 */
   white-space: nowrap;  /* 强制一行显示 */
}

多行显示:

{
  width: 200px;
  height: 50upx;
  text-overflow: ellipsis;  /* 将文本溢出显示... */
  overflow: hidden; /* 超出隐藏 */
  word-break: break-all; /* break-all(允许在单词内换行) */
  display: -webkit-box;  /* 对象作为伸缩盒子模型显示 */
  -webkit-box-orient:vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp:2; /* 呈现几行 我这里设置两行,可自行调试 */    
}

css设置td溢出隐藏

一般按正常的方法设置溢出隐藏显示...是可以使用的，但是在table里不生效，这是我们就可以给table加一个table-layout:fixed，这样我们设置溢出隐藏的样式才会生效。

table{

        width:100px;

        table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */

    }

    td{

        width:100%;

        word-break:keep-all;/* 不换行 */

        white-space:nowrap;/* 不换行 */

        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/

    }