javascript - 将文本添加到容器以在调整大小时填充它

Question

假设我有一个200px又宽又50px高的 div，其文本内容是“Hello, World!”。适合 div 边缘到边缘，从上到下。我正在使用 jQuery UI Resizable 来允许扩展这个 div。我想在 div 展开时向它添加文本。如果将 div 的大小调整为400px宽，则内容将是“Hello World！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
    }
});

Answer 1

将css保留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!");
    }
});