My text overlaps my div

Question

I need to wrap my text in a div. But if I use flex-wrap, it doesn't wrap the text and div's width becomes larger. I just want to make the wrapped text to be at the center.

.flex-container {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

<div class="flex-container">
  <span>longlonglonglonglonglonglong</span>
</div>

score 1 · Answer 1 · edited Jan 17 '18 at 08:45

1

You can use the word-break: break-all:

.flex-container {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  word-break: break-all;
}

<div class="flex-container">
  <span>longlonglonglonglonglonglong</span>
</div>

edited Jan 17 '18 at 08:45

VXp

11,598
6
31
46

answered Jan 17 '18 at 08:41

Pravin Vavadiya

3,195
1
17
34

My text overlaps my div

1 Answers1