logo标签列表

如何在多个span元素之间设置换行？

htmlcss
7
我有一个HTML表格，其中一列将包含一长串文本。但是这些文本的某些部分需要具有不同的字体颜色，因此我将这些文本分成一系列span元素，以便我可以相应地对每个元素进行格式化。问题在于，我不能使文本在此单元格内换行，它正在扩展TD大小以适应元素。
我不需要每个span内的文本断开，但当元素到达TD元素的末尾时，我希望下一个span在下一行中排列。
有人知道如何做到吗？
以下是示例：
源代码：
<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
https://dev59.com/-W3Xa4cB1Zd3GeqPhbHq#61071200 - Nikhil Kulkarni
3个回答
11
如果你将span设置为 inline-block ，你将获得所需的行为；
span
  {display:inline-block}

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

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

（红色边框只是为了让你看到正在发生的事情。）

屏幕将会看起来像这样；

capture

如果您将宽度更改为 15em，就像这样；

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

然后屏幕将显示如下内容：

在此输入图片描述

顺便提一下，这是我用于屏幕截图的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>
这似乎禁止浏览器通过边界进行搜索。另一种选择是插入<wbr>元素。 - user202729
1
您可以尝试以下任一操作：

td {
  word-break:break-all;
}

或者

td {
  word-wrap:break-word;
}

然后，给td赋予宽度，并将table-layout:fixed;设置为表格本身，这样当单元格的宽度达到时，单词就会自动换行。

Fiddle #1 | Fiddle #2

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接