向容器中添加文本,以便在容器调整大小时填充它

Add text to container to fill it as it resizes

本文关键字:调整 小时 填充 添加 文本      更新时间:2023-09-26

假设我有一个div,宽度为200px,高度为50px,并且文本内容为"Hello, World!",适合div,从上到下,从边到边。我使用jQuery UI Resizable来扩展这个div。我想在div展开时向其添加文本。如果div被调整为400px宽,内容将是"Hello World!"

一些开始的示例代码:

<div class="resize-me" style="height: 50px; width: 200px;">
    Hello, World!
</div>
$(".resize-me").resizable({
    resize: function(event, ui){
        // Logic here to dynamically add/remove/show/hide text as the div
        // is resized
    }
});

如何将overflow:hidden留在css中并根据宽度缩放?

<div class="resize-me" style="height: 50px; width: 200px; overflow:hidden;">
    Hello, World!
</div>
$(".resize-me").resizable({
    resize: function(event, ui){
        $(this).text(ui.size.width*"Hello World!");
    }
});