超出宽度显示...

超出宽度显示...

<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 地址内部进行换行 */
    }

效果图:超出宽度显示...

双击展开文字

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

效果图:超出宽度显示...

 

上一篇:‘—’这个特殊符号导致不换行的解决方法


下一篇:解决IOS中h5页面拉到最下边会漏浏览器自带的白底