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

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

如何将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!");
    }
});