多行文字溢出时出现省略号本文推荐两种方法。1.csstip：只兼容chrome内核的浏览器。ff不支持。.box{溢出：隐藏；/*溢出时不显示溢出的内容*/text-overflow:ellipsis;/*溢出时使用省略号代替*/display:-webkit-box;/*chrome浏览器的私有属性。显示为一个框。*/-webkit-box-orient:vertical;/*垂直排列元素*/-webkit-line-clamp:2;/*显示多少行*/}扩展word-wrap关键字说明默认值word-wrap指定word换行条件normal，在分词点换行。break-word，在一个词中换行。overflow-wrap，在css3中由word-wrap改为overflow-wraptext-overflow关键字描述了默认值test-overflow超出框的文本如何显示clip，裁剪文本。省略号，显示省略号。字符串，显示指定的文本。white-space关键字描述了默认值white-space如何对待空白以及换行是否正常，空白会被浏览器忽略。前，留空。nowrap，文本不换行。预换行，保留空格，正常换行。预行，合并空白，保留换行符。浏览器尚不支持box-orient属性。需要使用各个浏览器的私有属性。关键字描述默认值box-orient子元素如何排列inline-axis，子元素是沿着inline轴（映射到水平方向）。horizo??ntal，指定子元素从左到右排列在一条水平线上。vertical，从上到下垂直排列子元素。块轴，沿块轴的子元素（映射到垂直）。inherit，继承父元素。line-clamp在chrome内核的浏览器中只支持自己的私有属性。要显示多少行块级元素。2.js有很多方法可以用js来控制溢出文字的显示方式。这里推荐一个脚本文件：ellipsis.jsdelivr.jsnamelinkellipsislinkhttps://www.jsdelivr.com/pack...ellipsishttps://cdn.jsdelivr.net/npm/...ellipsisgithttps://github.com/glinford/e...如何使用。1.导入脚本文件2.使用varell=Ellipsis({lines:3})varele=document.getElementsByClassName('test')ell.add(ele)扩展了它并且有一些配置项。如果未配置，将使用默认值。{ellipsis:'...',//默认显示的替代文字debounce:0,//延迟多久执行responsive:true,//窗口大小变化时是否执行className:'.clamp',//默认动作有这个类的元素。lines:2,//默认只出现2行元素。portrait:null,//默认情况下不会改变，如果你想在纵向模式下有不同的行数，break_word:true//默认断词。}2018/06/12by石头
