如何設置跨度元素之間的換行符

我有一個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

來源

2014-03-18 Marlon

使用table-layout:fixed在<table>上強制嚴格的寬度處理，然後在表格單元格上明確設置所需的寬度。

來源

2014-03-18 21:59:23

您可以嘗試兩種：

td { 
    word-break:break-all; 
}

或

td { 
    word-wrap:break-word; 
}

然後，分配寬度與td以及設置table-layout:fixed;表本身就應該迫使話來包裝時，擊中表格單元格的寬度。

Fiddle #1 | Fiddle #2

來源

2014-03-18 22:02:19

如果您使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>

來源

2014-03-18 22:24:00

如何設置跨度元素之間的換行符

回答

相關問題