javascript - 调整浏览器大小时文本上的 CSS 省略号

标签 javascript jquery html css

我有一个<table>宽度设置为 100%。里面<td>是一个带有文本字符串的 div,如果文本宽度溢出,我想在其中添加省略号。

在 javascript 中,我设置了 <div> 的宽度到 <td> 的宽度这在加载(或刷新)时工作正常,但我无法让它工作 onresize .

(不要担心我实际上在这里做什么。它是我为了解决这个问题而简化的更大表格的一部分。)

任何人都可以告诉我如何让文本省略 onresize

function doThis() {
    $('.divClass').css('width', $(".tdClass").css('width'));
}
.divClass {
    width:0px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="doThis()" onresize="doThis()">

<table style="width:100%">
    <tr>
        <td class="tdClass">
            <div class="divClass">
                the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog 
            </div>
        </td>
    </tr>
</table>

</body>

最佳答案

如果对 body 属性不起作用,请尝试将调整大小与浏览器窗口绑定(bind)

$(window).resize(function(){
   doThis()
});

关于javascript - 调整浏览器大小时文本上的 CSS 省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36540143/

相关文章:

javascript - 更新 jQuery .each() 中的加载栏

javascript - 如何控制 jquery 验证错误消息

javascript - 如何仅在此 block 中显示元素?

javascript - HTML、JS、Canvas - 我的带有图片的 JS 脚本没有显示

html - Bootstrap 4 - 如何使没有固定高度的 div 在另一个高度设置为 100% 的 div 中滚动

javascript - 控制另一个文件中的异步函数

javascript - 将服务值直接调用到指令中

php - Ajax鼠标悬停显示功能对齐

javascript - 单击 atag 时显示特定 div。并隐藏其他div

javascript - 将查询字符串参数添加到 iframe 中的 YouTube 网址