适合 div 的动态文本答案

【问题标题】：Dynamic text fitting into div适合 div 的动态文本
【发布时间】：2011-09-15 21:33:09
【问题描述】：

<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 的高度每次都能保持一致。

我该怎么做？

谢谢！

【问题讨论】：

第一点：如何使用自动换行：break-word; ?
字体调整：stackoverflow.com/questions/687998/…
stackoverflow.com/questions/687998/… - 阅读此内容。至于 1) - CraigW 所说的。
该链接中的插件是我所需要的，我将创建另一个问题，即如何将它应用于动态生成的 HTML，而不是在 DOM 中尚未输入的 HTML。 - 把它作为一个答案并且不接受。

标签： jquery html css asp.net-mvc-2

【解决方案1】：

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

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

【讨论】：

请记住，这些 div 不是在前端输入的，它们是在后端生成的，所以我想我会在后端重新调整文本的大小。

【解决方案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 时，你给它一个带有宽度和溢出的样式属性。

【讨论】：

【解决方案3】：

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

我使用了 cmets 中说明的这个，它有效。

Auto-size dynamic text to fill fixed size container

【讨论】：

【解决方案4】：

使用此代码溢出换行：断字；

【讨论】：