超出宽度显示...

超出宽度显示...(单行)

<table>
    <tr>
        <td>888888888888888888888888</td>
        <td>8888888888888888888888888</td>
        <td>000000000000000000000000000</td>
    </tr>
</table>

   td{
        border: 1px solid #000;
        width:100px;
        display: block;
        /* 关键代码 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;/* 在长单词或 URL 地址内部进行换行 */
    }

设置title,鼠标移上去展示完整信息

 $(".family_" + index).attr('title',item.keyDisplay)

 

双击展开文字

   $('body').on('dblclick', 'td', function () {
            debugger
            if ($(this).css('white-space') == 'nowrap') {
                $(this).css({'white-space': 'normal'})
            } else {
                $(this).css({'white-space': 'nowrap'});
            }
        })

 

超出宽度显示...(多行)

 <div class="test">
        多行显示只针对汉字有效多行显示只针对汉字有效多行显示只针对汉字有效多行显示只针对汉字有效多行显示只针对汉字有效多行显示只针对汉字有效
 </div>

 .test {
        width: 225px;

        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
     /* span标签需要这俩*/
    word-wrap: break-word;
         white-space: normal;
        /* -webkit-box-orient: vertical; 无效可以把这个放开试试*/
    }

双击展开文字

     $('body').on('dblclick', '.test', function () {
            if ($(this).css('display') == '-webkit-box') {
                $(this).css({ 'display': 'block' })
            } else {
                $(this).css({ 'display': '-webkit-box' });
            }
        })