关于文字内容溢出的处理

文字溢出一般会出现在表格，或者是banner、介绍页；对于这类，我们一般是用省略号去处理；再给个title属性；

注：主要是将省略号的情况，其它的暂不描述；

1.单行隐藏

单行隐藏是最常用的了，主要的css样式时：text-overflow:ellipsis;这类主要是用于块级元素中；但是，当我们给元素添加这个样式之后，没有生效，是因为我们缺少了另外两个样式：

overflow:hidden和white-space:nowrap;

<div style="width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">这是一个单行隐藏的测试，哈哈哈就是这样的了，很简单的</div>
<!--white-space 不换行  overflow:hidden:溢出隐藏  text-overflow:ellipsis;省略号-->

如果是行内元素，请加上display:inlie-block/block 这个属性

但是，我们格（table）的时候就会发现，在ie11或者是ie8中样式失效了，解决的办法是添加table-layout:fixed;这个属性

 <!-- 对于table类型来说，table-layout: fixed;这个很重要，必须要有-->
        <table style="table-layout: fixed;">
            <tr>
                <td style="display: block;width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"></td>
            </tr>
        </table>

2.多行注释

有些业务可能需要事项这样的，我要多行显示，

 <!-- -webkit-line-clamp: 3;第几行裁剪 box-orient: vertical;排列方式；去掉white-space-->
        <div style="width: 100px;overflow: hidden;display: -webkit-box;line-clamp: 3;
        -webkit-line-clamp: 3;-moz-box-orient: vertical;-webkit-box-orient: vertical;">
        相见时难别亦难，东风无力百花残；凄凄惨惨戚戚，淋淋漓漓，日月经天，江河行地，春往秋来，花开花落
        </div>

原文地址：https://www.cnblogs.com/mamifeng/p/12932145.html