How can I make sure that this text is vertically centered does not come out of the div?

Question

I had a grid of squares. Every square has a text inside vertycally centered, but if the text is too long go out of div. I tried with property 'word-wrap: break-word;' inside table-cell class but nothing happens. The size of the div must be the same because later I would like to make the text responsive based on the size of the square.

 
.table {
  height: 100%;
  width: 100%;
  display: table;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  grid-auto-rows: 1fr;
}

.grid::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}


.grid > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.grid > * {
  background: rgba(0,0,0,0.1);
  border: 1px white solid;
}

<div class="grid">
  <div id="preview" class="table">
    <div id="previewText" class="table-cell">kjfvndkjfvnkdjfvnkdjfvnkjdfjkvndjkfvnjdvfvpensierosdvjsdhkvjsdnvksjd</div>
  </div>
</div>

`word-break: break-all;` should fix this. – palaѕн May 02 '20 at 17:39 — palaѕн, May 02 '20 at 17:39

score 0 · Answer 1 · answered May 02 '20 at 18:32

0

add css below to class .table-cell :

text-align: center;
word-break: break-all;

answered May 02 '20 at 18:32

Mohsen007

285
3
13

score 0 · Answer 2 · answered May 02 '20 at 18:40

add "word-break: break-all;" to the ".table-cell" class.

run my modified snippet in full page mode and you will see it working.

.table {
  height: 100%;
  width: 100%;
  display: table;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  word-break: break-all;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  grid-auto-rows: 1fr;
}

.grid::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}


.grid > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.grid > * {
  background: rgba(0,0,0,0.1);
  border: 1px white solid;
}

<div class="grid">
  <div id="preview" class="table">
    <div id="previewText" class="table-cell">kjfvndkjfvnkdjfvnkdjfvnkjdfjkvndjkfvnjdvfvpensierosdvjsdhkvjsdnvksjd</div>
  </div>
</div>

How can I make sure that this text is vertically centered does not come out of the div?

2 Answers2