html - 如何在不剪裁的情况下将文本保留在 div 的边界内？

Question

我试图将文本保留在 div 表格单元格的边界内，但不进行剪裁。

问题是文本不断溢出其单元格 div。请理解文本中没有超过 div 宽度的单词。

此外，当我从单元格 div 中删除“float: left”元素时，整个 div 表变得一团糟。

.table {
    display: table;
    width:302px;
    padding: 0px;
    margin:0;
    text-align:center;
    word-break:break-all;
    }

.row {
    display: table-row;
    vertical-align:middle;
    text-align:center;
    margin: 0;
    padding:0;
}

.cell {
    display: table-cell;
    float:left;
    padding: 0px;
    min-height: 100px;
    border: 1px solid #000;
    margin-left:5px;
    margin-right:0px;
    margin-bottom: 0px;
    height: auto;
    margin-top:0px;
    width:300px;
    }

Answer 1

我试过你提供的CSS，好像没问题。您也可以提供 HTML 吗？

 .table {
   display: table;
   width: 302px;
   padding: 0px;
   margin: 0;
   text-align: center;
   word-break: break-all;
 }
 .row {
   display: table-row;
   vertical-align: middle;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 .cell {
   float:left;
   min-height: 100px;
   border: 1px solid #000;
   margin-left: 5px;
   margin-right: 0px;
   margin-bottom: 0px;
   height: auto;
   margin-top: 0px;
   width: 300px;
 }

<div class="table">
  <div class="row">
    <div class="cell">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</div>
  </div>
</div>