Как я могу сделать автоматическую ширину
?

У меня есть веб-чат, и пузыри разговоров имеют фиксированную ширину. Как я могу сделать переменную ширины в зависимости от размещаемого контента?

Я оставляю фрагмент 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;
}
3
задан 23.11.2019, 19:55
2 ответа

Ты мог делать это в travГ©s из свойства max-width, которые помогают устанавливать ширину mГЎximo, что у элемента будет.

Таким образом:

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

Ты Используешь:

  • word-wrap: break-word;, из-за которых, когда контейнер будет ширины mГ-nimo определено tendrГЎ избыток внутреннего текста, тогда мы способствуем тому, чтобы тексты ушли в следующего renglГіn предупреждая, вытекли
  • мы показываем Ему, что я взял 20% шириной mГЎximo, что harГЎ, которое например:

comportarГ - в таким образом:

  • window - тогда 500px div измеряет 121px
  • window - тогда 812px div измеряет 183px

Пример

    <!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>
1
ответ дан 23.11.2019, 22:53

Если ты хочешь, чтобы ширина привыкла в контент, несмотря на то, что лишаешь ширины

bastarГ -
0
ответ дан 23.11.2019, 22:53