Question

我有一个HTML表格，其中一个列将包含很长的文本行。但是这篇文章的某些部分需要有不同的字体颜色，所以我将这个文本分成一系列的span元素，所以我可以相应地格式化每个。问题是我可以在这个单元格中进行文本换行，它扩展TD大小以适应元素。

我不需要每个范围内的文本中断，但是当元素到达TD元素的末尾时，我希望下一个范围排列在下一行。

有谁知道我怎么能这样做？

举例说明：

来源：

<table>
   <tr>
      <td>
          <span>Sample Text A</span>
          <span>Sample Text B</span>
          <span>Sample Text C</span>
          <span>Sample Text D</span>
          <span>Sample Text E</span>
          <span>Sample Text F</span>
      </td>
   </tr>
</table>

这是所需的输出：

This is the limit of the TD element =============>|
Sample Text A Sample Text B Sample Text C 
Sample Text D Sample Text E Sample Text F

这是我得到的结果：

This is the limit of the TD element =============>|
Sample Text A Sample Text B Sample Text C Sample Text D Sample Text E Sample Text F

Answer 1

如果您将span设为inline-block，您将获得所需的行为;

span
  {display:inline-block}

然后将表格单元格的宽度设置为20em，就像这样;

td
  {width:20em; border:1px solid red}

（红色边框只是让你可以看到发生了什么。）

屏幕看起来像这样;

capture

如果您要将宽度更改为此15em;

td
  {width:15em; border:1px solid red}

然后屏幕会显示这个;

enter image description here

仅供参考我在屏幕截图中使用的HTML;

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <table>
       <tr>
          <td>
              <span>Sample Text A</span>
              <span>Sample Text B</span>
              <span>Sample Text C</span>
              <span>Sample Text D</span>
              <span>Sample Text E</span>
              <span>Sample Text F</span>
          </td>
       </tr>
    </table>
  </body>
<html>

Answer 2

在table-layout:fixed上使用<table>强制进行严格的宽度处理，然后在表格单元格中明确设置所需的宽度。

Answer 3

你可以尝试：

td {
  word-break:break-all;
}

或

td {
  word-wrap:break-word;
}

然后，为td指定宽度以及将table-layout:fixed;设置为表本身应强制单词在达到表格单元格的宽度时换行。

Fiddle #1 | Fiddle #2

如何在span元素之间设置换行符

3 个答案: