首页 > 其他 > 详细

超出宽度显示...

时间:2021-04-25 14:21:50      阅读:16      评论:0      收藏:0      [点我收藏+]

超出宽度显示...

<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‘});
            }
        })

效果图:技术分享图片

 

超出宽度显示...

原文:https://www.cnblogs.com/ljingjing/p/14699479.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!