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

【问题标题】：Add text to container to fill it as it resizes将文本添加到容器以在调整大小时填充它
【发布时间】：2013-06-13 04:50:36
【问题描述】：

假设我有一个 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
    }
});

【问题讨论】：

调整大小因子是恒定的还是动态的？
容器将始终按像素左右或垂直向下调整大小（jQuery UI 可调整大小的标准调整大小事件）。

标签： javascript jquery text resize

【解决方案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!");
    }
});

【讨论】：

理想情况下，它在被切断的边缘不会有半字或半字母。
@MikeTrpcic 你看过text-overflow attribute 了吗？试试省略号的例子。