jquery - 适合 div 的动态文本

Question

<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 是动态生成的，并放置在前端的容器 div 中。这些在后端生成，并通过 Json 作为 HTML 返回。

div class="post_body" 是保存用户消息的内容，当前显示“testbox”的消息。现在，我遇到的问题是，当用户编写的消息超出 div 的宽度时，它会继续前进，不会碰到第二行。

这是我想要实现的两件事:

1. 我想确保当文本不适合水平放置时，它会转到同一 div 中的第二行。
2. 如果文本需要分两行，我想缩小文本，这样 post_body div 的高度每次都能保持一致。

我该怎么做？

谢谢!

Answer 1

您可以只使用 CSS 并将 div 的宽度设置为特定数量。当文本变大以适应 DIV 标签的宽度时，它会自动换行。

要调整字体大小，您必须疯狂使用 javascript。就我个人而言，我也会为 DIV 标签设置一个高度并将 CSS overflow-y 设置为自动，这将导致 div 在有太多文本适合 DIV 标签尺寸时滚动