Question

我有一个表格单元定义如下：

td {padding-left: 300px} /* for easier demo when testing */

<table>
  <tr>
    <td class="payment-type-label">Payment Type: 
      <span class="payment-type">Computer Payment</span>
    </td>
  <tr>
</table>

如何让span换行到新行，而不是在文本下溢出：

所以而不是：

Payment Type: Computer
Payment

我在计算机下得到付款这个词？

Payment Type: Computer
              Payment

Answer 1

首先表格是表格数据 - 虽然你的内容可能是表格，但你没有正确使用表格，你应该摆脱你的表格，或者正确使用它：

以下分隔列标题和列详细信息

th {
  text-align: left;
  vertical-align: top;
  padding-right: 1em;
}

<table>
  <tr>
    <th scope="row" class="payment-type-label">Payment Type: </th>
    <td>
      Computer <br /> Payment
    </td>
  </tr>
</table>

如果那是不可能的，那么我会删除它们表，因为它在语义上不正确并使用flex方法：

.row {
  display:flex;
  width:200px;   /* for test so content wraps */
}

.row .title {
  padding-right: 1em;
  white-space: nowrap;  /* keep title on one line */
}

<div class="row">
  <div class="title">Payment Type:</div>
  <div class="content">Computer Payment</div>
</div>

Answer 2

只需添加plink -ssh user@ipaddress -pw password < input.txt -

即可

<br />

修改

可以试试这个 -

<td class="payment-type-label">Payment Type: 
<span class="payment-type" >Computer <br /> Payment</span>
</td>

通过设置.payment-type {display:block;width:80px;}的宽度，它将强制文本换行

示例 - jsfiddle

让span元素包含在td

2 个答案: