erginduran erginduran - 6 months ago 13
CSS Question

how can i make text wrapping in responsive div?

I'm building a site with Bootsrap and using grid system totally. I got a problem with long text.

<div class="row">
<div class="col-md-9">
LONGTEXTHERELONGTEXTHERELONGTEXTHERE
</div>
</div>


You see, I don't know the real width size, so I can't do text wrapping in that div. Can I not do text wrapping without fixed width size?

I tried:

word-wrap:break-word;
white-space:initial;
white-space:normal;


but these things works with fixed width size.

Answer

Try to use word-wrap: break-word; with display: table-cell;.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.col-xs-1 {
  background-color: yellow;
  display: table-cell;
  word-wrap: break-word;
}
<div class="row">
  <div class="col-xs-1">
    LONGTEXTHERELONGTEXTHERELONGTEXTHERE
  </div>
</div>