thetft thetft - 2 months ago 19
CSS Question

CSS - word-break changes element position

Im trying to do a little dashboard for some webservices i wrote, but whenever text within a widget breaks, the widget changes its position.

CSS looks like this:

#container {
text-align: center;
width: 100%;
height: auto;
}

.widget {
background-color: firebrick;
margin: 1px;
width: 200px;
height: 200px;
display: inline-block;
text-align: center;
word-break: break-all;
}


I reproduced that problem in a fiddle:

https://jsfiddle.net/vbb6fhz0/1/

Answer

If you want to align the box, then use float for better result. word-break has nothing to do with alignment.

But in your case, just vertical-align: middle solved the alignment issue

#container {
  text-align: center;
  width: 100%;
  height: auto;
}

.widget {
  background-color: firebrick;
  margin: 1px;
  width: 200px;
  height: 200px;
  display: inline-block;
  text-align: center;
  word-break: break-all;
  vertical-align: middle;
}
<body>
  <div style="width: 100%; height:100%;">
    <div id="container">
      <div class="widget">
        <p>1dawdawdaegsergsergsrsrgrsddadawdadawdwdwbf</p>
      </div>
      <div class="widget">
        2wdadawdad
      </div>
      <div class="widget">
        3wadawdwdawda
      </div>
      <div class="widget">
        4dawdawdaw
      </div>

    </div>
  </div>
</body>

Comments