如何保证这个文字垂直居中不出div？[重复]

Question

这个问题在这里已经有了答案:

用CSS打破长词 (6个答案)

封闭 2个月前.

我有一个正方形的网格。每一个方格里面都有一个文本，垂直居中，但是如果文本太长，就会从div中消失。我尝试在table-cell类中使用属性 "word-wrap: break-word;"，但什么都没有发生。div的大小必须是相同的，因为后来我想根据方块的大小使文本响应。

 
.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>

Answer 1

添加下面的css到类.table-cell。

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

Answer 2

添加 "word-break: break-all; "到".table-cell "类中。

在全页面模式下运行我修改的代码段，你会看到它的工作。

.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>