Ajuste de texto dinámico en 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> 

Por lo tanto, estos div se generan sobre la marcha y se colocan en un contenedor div en la parte delantera. Estos se generan en el backend y se devuelven como HTML a través de Json.

El div class="post_body" es lo que contiene el mensaje del usuario, actual el que dice 'testbox'. Ahora, el problema que estoy teniendo es que cuando un usuario escribe un mensaje que se extiende más allá del ancho del div, simplemente continúa, no se topa con la segunda línea.

Aquí es las dos cosas que quiero lograr:

1. quiero para asegurarse de que cuando el texto no cabe en horizontal, que va en una segunda línea dentro de la misma div.
2. Quiero contraer el texto si necesita ir en dos líneas para que la altura del div post_body se mantenga constante todo el tiempo.

¿Cómo puedo hacer esto?

Gracias!

Answer 1

Nadie más lo está haciendo, así que lo haré.

Utilicé esto que se indicó en los comentarios y funciona.

Auto-size dynamic text to fill fixed size container

Answer 2

Puede usar CSS y establecer el ancho del div en una cantidad específica. Cuando el texto llegue a ser grande para que se ajuste al ancho de la etiqueta DIV, se ajustará.

Para ajustar el tamaño de la fuente, tendrá que volverse loco con javascript. Personalmente, también establecería una altura para la etiqueta DIV y establecería CSS overflow-y en automático, lo que provocaría que el div se desplace una vez que haya mucho texto para las dimensiones de la etiqueta DIV

Answer 3

Esto parece ser trabajando para mí:

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

Asegúrate de que al generar tu div le das un atributo de estilo con ancho y desbordamiento.

Answer 4

uso este código desbordamiento-wrap: break-palabra;