1

Есть <div>. Как сделать так, чтобы когда допустим в нем было написано "Вау!" он становился коротким, а когда, например, "Привет! Бла бла бла бла" он был типа длинным?

Пример на картинках:

Длинный

Короткий

Вот мой код

.message-from {
      position: relative;
      margin-top: 20px;
    margin-left: 25px;
    margin-bottom: 10px;
    padding: 11px;
    padding-left: 16px;
    font-size: 15px;
    background: #1a1a1d;
    max-width: 295px; /*это длина как на первой картинке*/
    width: auto;
    height: auto;
    text-align: left;
    border: 2px solid #1a1a1d;
    box-shadow: 0 0 13px #000000;
    border-radius: 20px;
    font-family: Beautiful, sans-serif;
    color: #6d6d6d;
}
<div class="message-from">
   <h2>Вау!</h2>
</div>

1 ответ 1

2

display: inline-block; Вам в помощь:

.message-from {

    display: inline-block;
    
      position: relative;
      margin-top: 20px;
    margin-left: 25px;
    margin-bottom: 10px;
    padding: 11px;
    padding-left: 16px;
    font-size: 15px;
    background: #1a1a1d;
    max-width: 295px; /*это длина как на первой картинке*/
    width: auto;
    height: auto;
    text-align: left;
    border: 2px solid #1a1a1d;
    box-shadow: 0 0 13px #000000;
    border-radius: 20px;
    font-family: Beautiful, sans-serif;
    color: #6d6d6d;
}
<div class="message-from">
   <h2>Вау!</h2>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.