Здравствуйте. Делаю мини чатик, но есть проблема. Если сообщение длинное и без переносов через enter то блок с текстом вылазит за пределы контейнера для сообщений. Как можно решить эту проблему? Спасибо.
2 ответа
Например с помощью word-wrap: break-word;
.box {
width: 400px;
background: lightblue;
padding: 10px;
word-wrap: break-word;
}
<div class="box">
lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
</div>
P.S: Вариант 2 для конкретно вашего примера с display: inline-flex;
.divStyles {
padding: 5px;
display: inline-flex;
word-break: break-word; /* doesn't work in firefox */
word-wrap: break-word;
white-space: normal;
max-width: 350px;
max-height: 200px;
background: green;
}
<div class="divStyles">
testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
можно использовать word-break
.chat {
background:#f4f4f4;
border-radius:3px;
border:1px solid #666;
color:#666;
padding:10px;
font-family:sans-serif;
}
.message {
background:#00AAFF;
border-radius:3px;
border:1px solid #005B88;
color:#005B88;
word-break:break-word;
box-sizing:border-box;
padding:10px;
}
<div class="chat">
<div class="message">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttextv</div>
</div>