3

Tengo un chat web y las burbujas de conversación tienen un ancho fijo. ¿Cómo puedo hacer para que el ancho se variable en función del contenido que se va colocando?

Dejo el fragmento del css.

.chat-bubble {
    border-radius: 7px;
    box-shadow: 0 2px 2px rgba(126,156,163,0.55);
    padding: 5px 7px;
    width: 300px;
    max-width: 100%;
    position: relative;
}
4
  • Puedes pasar el fragmento de HTML que genera la burbuja? Commented el 23 nov. 2019 a las 17:28
  • 3
    No debería bastar con quitarle el ancho establecido?
    – user128299
    Commented el 23 nov. 2019 a las 17:31
  • Julio, cambia la propiedad width min-width y max-width de manera que controles un ancho mínimo y un máximo para el contenido. Commented el 23 nov. 2019 a las 17:38
  • 1
    Tal y como dice @Aprendiz, el problema está en que por mucho que le pongas el max-width, tienes una anchura fija por lo que ignorará la propiedad max-width Commented el 23 nov. 2019 a las 18:01

3 respuestas 3

1

Pudieras hacerlo a través de la propiedad max-width que ayuda a establecer el ancho máximo que el elemento va a tener.

De este modo:

div{
  background-color: red;
  max-width: 20%;
  word-wrap: break-word;
  padding: 12px;
  font-size: 10px;
}

Haces uso de:

  • word-wrap: break-word; por que cuando el contenedor sea de un ancho mínimo determinado tendrá desbordamiento del texto interno, entonces hacemos que los textos se vayan al siguiente renglón previniendo se salgan
  • Le indicamos que tome el 20% de ancho máximo, lo cual hará que por ejemplo:

Se comportaría de este modo:

  • window es de 500px entonces el div mide 121px
  • window es de 812px entonces el div mide 183px

Ejemplo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        div{
          background-color: red;
          max-width: 20%;
          word-wrap: break-word;
          padding: 12px;
          font-size: 10px;
        }
      </style>
    </head>
    <body>
    <div>
      Hola a todos 
      <p>
        Envío un cordial saludo a todos y todas quienes forman estan comunidad.
      </p>
    </div>
    <script>
        window.addEventListener("DOMContentLoaded", () => {
          alert(window.innerWidth)
          alert(document.querySelector("div").offsetWidth)
        })
    </script>
    </body>
    </html>

0

la mejor opción es jugar con el display de los elementos y elk ancho que que le otorgas a cada uno de ellos, dejo un ejemplo a continuación:

html:

<div>
    <p class="chat-bubble">hola</p>
   </div>
   <div>
   <p class="chat-bubble">hola, esto es una prueba de como mejor funciona el ancho 
   variable</p>
  </div>

css:

div {width:100%; display:block}

 .chat-bubble {
   border-radius: 7px;
   box-shadow: 0 2px 2px rgba(126,156,163,0.55);
   padding: 5px 7px;
   display: inline-block;
   min-width: 50px;
   max-width: 100%;
   white-space: normal;
  }
-1

Si quieres que el ancho se amolde al contenido, con quitar el ancho bastaría:

Ejemplo 1:

 <div style="width:20%;">
    <div>Aquí el contenido del div se ajusta al padre, un 20%</div>
 </div>

Ejemplo 2:

 <div>
    <div>Aquí el contenido del div se va ampliando dependiendo de su 
     contenido, sin ancho fijo.
    </div>
 </div>
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.