Question

我有很多文本要输入到详细信息表格单元格中。我希望当文本达到单元格中的最大宽度时，文本将溢出到下一行中的相应单元格而不是在同一单元格中开始新行。

＆＃13;

     table{
      border: 1px solid black;
      border-collapse: collapse;
      width: 100%;
    }

    th, td{
      border: 1px solid black;
      padding: 15px;
    }

    th{
      text-align: center;
    }

＆＃13;

    <table>
	<tr>
      <th>Number</th>
      <th>Details</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    </table>

＆＃13;

Answer 1

您可以使用单元格内的其他div执行此操作：

HTML：

<tr>
 <td>
   <div class="overflow">Lots of text about lots of things.  Overflow this into the other cell. Lots of text about lots of things.  Overflow this into the other cell. Lots of text about lots of things.  Overflow this into the other cell. 
   </div>
 </td>
</tr>

CSS：

td{
  border: 1px solid black;
  padding: 15px;
  height: 20px !important;
  overflow:visible;
  position:relative;
}

.overflow {
  position:absolute;
  top:0;
}

Check out this working example

Answer 2

由于表结构。

function* getAllSaga(action) { try { let books = yield select(Selectors.books); let games = yield select(Selectors.games); if(!books.length || !games.length){ yield put({ type: 'GET_BOOKS' }); yield put({ type: 'GET_GAMES' }); } books = yield select(Selectors.books); games = yield select(Selectors.games); const concated = books.concat(games); yield put({ type: 'GET_ALL_SUCCEEDED', all: concated }); } catch (err) { yield put({ type: 'GET_ALL_FAILED', message: err.message }); } }确保细胞不会相互重叠。

如果您将display:table-cell;更改为display:table-cell;

然后用display:inline-block;给它一个固定的高度/宽度，你会看到预期的行为。但如果您要更改表格的显示属性，也可以不使用它。

工作例：

＆＃13;

white-space: nowrap;

＆＃13;

table{
  border: 1px solid black;
  border-collapse: collapse; 
  display:inline-block;
}

th{
  border: 1px solid black;
  padding: 15px;
  display:inline-block;
}
td{
  border: 1px solid black;
  display:inline-block;
  width:100px;
  height:100px;
  white-space: nowrap;
}
th{
  text-align: center;
}

＆＃13;

在表中，如何使溢出中的文本到下一行中的对应文件？

2 个答案: