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的宽度时，它只是继续前进，它不会碰到第二行。

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

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

我该怎么做？

谢谢！

Answer 1

您可以使用CSS并将div的宽度设置为特定的数量。当文本变大以适应DIV标记的宽度时，它将仅包装。

要调整字体大小，你必须疯狂使用javascript。我个人也只是设置一个DIV标签的高度，并设置CSS overflow-y为auto，这将导致div滚动一旦有很多文本适合DIV标签尺寸

Answer 2

这似乎对我有用：

<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>

确保在生成div时，给它一个带宽度和溢出的样式属性。

Answer 3

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

我使用了评论中陈述的内容并且有效。

Auto-size dynamic text to fill fixed size container

Answer 4

使用此代码 overflow-wrap：break-word;

动态文本适合div

4 个答案: