HTML表格與寬度100％不與長文本

工作我有以下結構HTML表格與寬度100％不與長文本

<table cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE HERE 
     </div> 
    </td> 
</tr> 
... 
</table>

第一TD採用60像素，第二個取的100％的其餘部分，但是，當我有一些長沒有空格且沒有破折號的文字變得比100％大。如何在一行或多行顯示不可破壞的文本（兩種方式均可接受）並將表格保持在屏幕的100％？我試圖解決這個溢出隱藏，但它沒有效果。下面是該問題的屏幕截圖：link

來源

2011-11-18 Дамян Станчев

設置在你的CSS table-layout : fixed或<table style='table-layout : fixed'>認爲現在應該修復它。

這裏是code sample。一探究竟。

來源

2011-11-18 11:51:25

有一個CSS3屬性，word-wrap:break-word;，正是你所需要的。但不幸的是，它不適用於表格單元格。我認爲你需要重新考慮你的結構，選擇無桌面設計。

我寫這個例子給你

<style> 
section { /* your table */ 
    display:block; 
    width:300px; 
    background-color:#aaf; 
} 
section:after {display:block; content:''; clear:left} 

div { /* your cells */ 
    float:left; 
    width:100px; 
    background-color:#faa; 
    word-wrap:break-word; 
} 
</style> 

<section> 
    <div>Content.</div> 
    <div>Loooooooooooooooooooooooooooooooooooooooong cat.</div> 
</section>

P.S：word-wrap在IE支持5.5+，火狐3.5及更高版本，和WebKit的瀏覽器，如Chrome和Safari。

來源

2011-11-18 11:46:54 Simone

嘗試以下操作：

<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE no longer HERE ! 
     </div> 
    </td> 
</tr> 
... 
</table>

來源

2011-11-18 11:48:38

我應該補充說，這隻適用於IE，但是。 –

HTML表格與寬度100％不與長文本

回答

相關問題