html表格單元格中的強制換行符

我試圖找到一種方法來強制在表格單元格中的文本內部的文本將變得比說最大允許大小的50％更長。html表格單元格中的強制換行符

如何在沒有任何JS功能的情況下使用純CSS的CSS？

來源

2011-07-27 dantuch

@Phil其onebiglonglineoftext所以這裏給出的想法應該是足夠的 – dantuch

它不會工作，如果它只有一個單詞（見http://jsfiddle.net/NweWX/） – Fender

@Fender，謝謝... - 它工作罰款增加了像' – dantuch

我認爲你正在試圖做的是包裝loooooooooooooong文字或網址，所以他們不把桌子的大小了。（我剛剛試圖做同樣的事情！）

你可以通過給它的風格word-wrap: break-word（你也可能需要設置它的寬度）很容易地與DIV做到這一點。

div { 
    word-wrap: break-word;   /* All browsers since IE 5.5+ */ 
    overflow-wrap: break-word;  /* Renamed property in CSS3 draft spec */ 
    width: 100%; 
}

然而，爲表，則必須換一個DIV的內容（或其他塊標記）或適用：table-layout: fixed。這意味着列的寬度不再是流體，而是僅基於第一行中列的寬度（或通過指定的寬度）定義。 Read more here。

示例代碼：

table { 
    table-layout: fixed; 
    width: 100%; 
} 

table td { 
    word-wrap: break-word;   /* All browsers since IE 5.5+ */ 
    overflow-wrap: break-word;  /* Renamed property in CSS3 draft spec */ 
}

希望幫助別人。

來源

2013-11-26 00:19:25

我使用帶斷字的div來嵌套嵌套表格中的長單詞。它不需要表格佈局：固定樣式。感謝您在IE，Chrome和FF中工作的解決方案：） – davidjmcclelland

嗨，大衛 - 是的，如果你的內容是*內部的DIV *（這是在一個表內），那麼第一個片段就足夠了。感謝 –

，接受改爲this1 – dantuch

我建議你使用的包裝股利或段落：

<td><p style="width:50%;">Text only allowed to extend 50% of the cell.</p></td>

而且可以使一個類出來的：

<td class="linebreak"><p>Text only allowed to extend 50% of the cell.</p></td> 

td.linebreak p { 
    width: 50%; 
}

所有這一切都假定你的意思是50％，在50細胞的百分比。

來源

2011-07-27 11:18:41 orlp

啊，對於後期更新抱歉，但@Fender評論說，如果我想打破單一的，tolonglineoftext，它並沒有幫助。這是真正的問題。 – dantuch

如何居中這篇文章？ – zygimantus

這很難回答，如果不將HTML，但一般而言，您可以把：

style="width: 50%;"

在任一單元格，或將表格單元格內一個div，並把風格上。

但是一個問題是「50％是什麼？」它是父元素的50％，可能不是你想要的。

發佈您的HTML副本，也許你會得到更好的答案。

來源

2011-07-27 11:19:31 Ariel

您可以將文本放入寬度爲50％的div（或其他容器）中。

http://jsfiddle.net/6gjsd/

來源

2011-07-27 11:19:37

-1

我認爲這post會做一些幫助。將BR標籤添加到要在表格單元格中打破的位置很簡單。

來源

2016-06-13 08:16:13 l0o0

html表格單元格中的強制換行符

回答

相關問題