3

Здравствуйте. Делаю мини чатик, но есть проблема. Если сообщение длинное и без переносов через enter то блок с текстом вылазит за пределы контейнера для сообщений. Как можно решить эту проблему? Спасибо.

скрин

1

2 ответа 2

6

Например с помощью 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>

4
  • попробовал но нету эфекта, в чем может быть проблема? !скрин 11 июл 2017 в 16:16
  • Эм.. А flex-то тут при чём?
    – Qwertiy
    11 июл 2017 в 16:33
  • @Qwertiy, скрин из комментария выше посмотрите. Одного word-wrap: break-word; для display: inline-flex; недлостаточно
    – SVE
    11 июл 2017 в 16:59
  • word-break: break-word; word-wrap: break-word; - этого достаточно без flexbox'а же?
    – Qwertiy
    11 июл 2017 в 17:20
2

можно использовать 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>

1
  • С break-all даже обычные слова будут разрываться вместо переноса.
    – Qwertiy
    11 июл 2017 в 17:24

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