Jquery 动态文本拟合到div中 测试箱

因此，这些div是动态生成的，并放置在前端的容器

div

中。它们在后端生成，并通过Json以HTML的形式返回

div class=“post_body”

是保存用户消息的内容，当前显示为“testbox”。现在，我遇到的问题是，当用户编写的消息超出

div

的宽度时，它会继续运行，不会跳到第二行

以下是我想要实现的两件事：

我想确保当文本水平不适合时，它会进入同一div中的第二行

我想缩小文本，如果它需要在两行上运行，那么

post_body

div的高度每次都可以保持一致

我该怎么做

---

谢谢

您可以使用CSS并将div的宽度设置为特定的值。当文本变大以适应DIV标记的宽度时，它将只是换行

---

要调整字体大小，您必须疯狂使用javascript。就我个人而言，我只需为DIV标记设置一个高度，并将CSS overflow-y设置为auto，一旦有足够多的文本适合DIV标记尺寸，就会导致DIV滚动

这似乎对我有效：

<div rownumber="0" messageid="141" class="post" style="position: relative; top: 0px;">
    <div class="post_body">testbox</div>
    <div class="post_info" style="top: 0px;">
        <ul>
            <li class="vote" id="voteli"><a href="#">vote up</a></li>
            <li class="flag" id="flagli"><a href="#">flag</a></li>
        </ul>
    </div>
</div>

测试箱。这是一个测试。这是一个测试。这是一个测试。

---

确保在生成div时为其指定一个带有宽度和溢出的style属性。

没有其他人在这样做，所以我会这样做

我使用了这一点，这是在评论和它的工作

使用此代码

---

溢出包装：断开单词

第一点：如何使用换行：break word？对于字体大小：-请阅读此内容。至于1）-CraigW说了什么。这个链接中的插件就是我需要的，我将创建另一个问题，关于如何将它应用到动态生成的HTML，而不是在DOM中输入的HTML。-请记住，这些div不是在前端输入的，它们是在后端生成的，所以我想我应该在后端重新调整文本的大小。

<div rownumber="0" messageid="141" class="post" style="position: relative; top: 0px;">    
     <div class="post_body" style="width:100px; overflow:scroll; ">testbox. this is a test. this is a test. this is a test.</div>     
     <div class="post_info" style="top: 0px;">         
     <ul>             <li class="vote" id="voteli"><a href="#">vote up</a></li>             <li class="flag" id="flagli"><a href="#">flag</a></li>         </ul>     

     </div> 
</div>