调整浏览器大小时对文本的CSS省略号

Question

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

在javascript中我将<div>的宽度设置为<td>的宽度，这在加载（或刷新）时工作正常，但我无法使其工作onresize 。

（不要担心我在这里做的事情。这是我为了这个问题而简化的一个更大的表格的一部分。）

任何人都可以建议我如何将文本设置为省略号 - ify 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>

Answer 1

如果不处理body属性，请尝试将resize绑定到浏览器的窗口

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

Answer 2

我想只用css就可以完成。 你能试试这个代码吗？

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<style>
   /* Added new style property */
table,tr,td,tbody{
    width:100%;
    display:inline-block;

}
td{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
  /* New style property end her */
</style>

</head>
<body>  <!-- //removed onload & onresize -->

<table>
    <tr>
        <td>  <!-- // removed the div -->
             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 

        </td>
    </tr>
</table>

</body>
</html>

Answer 3

Div是块元素，因此如果不给出任何宽度，它将自动获取td的宽度。 意味着不需要脚本。

Answer 4

尝试使用display:block属性使表响应，以便div可以在resize上从td元素获得适当的宽度。

table, thead, tbody, th, td, tr {
    display: block;
    height: auto;
}

调整浏览器大小时对文本的CSS省略号

问题描述

4 个解决方案

解决方案1
0 2016-04-11 05:00:46

解决方案2
0 2016-04-11 05:24:15

解决方案3
0 2016-04-11 06:09:30

解决方案4
0 2016-04-11 06:13:02

调整浏览器大小时对文本的CSS省略号

问题描述

4 个解决方案

解决方案1 0 2016-04-11 05:00:46

解决方案2 0 2016-04-11 05:24:15

解决方案3 0 2016-04-11 06:09:30

解决方案4 0 2016-04-11 06:13:02

解决方案1
0 2016-04-11 05:00:46

解决方案2
0 2016-04-11 05:24:15

解决方案3
0 2016-04-11 06:09:30

解决方案4
0 2016-04-11 06:13:02