HTML TD换行文字

Question

我想包装一些添加到<td>元素的文本.我试过了style="word-wrap: break-word;" width="15%".但它并没有包装文本.是否必须给它100%的宽度？我有其他控件要显示,所以只有15%的宽度可用.

Answer 1

包装TD文本

首先设置表格样式

table{
    table-layout: fixed;
}

然后设置TD Style

td{
    word-wrap:break-word
}

Answer 2

HTML表格支持"table-layout:fixed"css样式,可防止用户代理使列宽适应其内容.您可能想要使用它.

Answer 3

我相信你已经遇到了表格中的22个.表格非常适合在表格结构中包装内容,并且它们可以很好地"拉伸"以满足其所包含内容的需求.

默认情况下,表格单元格将拉伸以适合内容...因此您的文本只会使其更宽.

有一些解决方案.

1.)您可以尝试在TD上设置最大宽度.

<td style="max-width:150px;">

2.)您可以尝试将文本放在包装元素(例如跨度)中并对其设置约束.

<td><span style="max-width:150px;">Hello World...</span></td>

请注意,旧版本的IE不支持min/max-width.

由于IE本身不支持max-width,因此如果你想强制它,你需要添加一个hack.有几种方法可以添加黑客攻击,这只是一种方法.

在页面加载时,仅对于IE6,获取表格的渲染宽度(以像素为单位)然后获得15%的宽度并将其作为宽度应用于该列中的第一个TD(或者如果您有标题则为TH),以像素为单位.

Answer 4

使用word-break它可以在不定型使用table，以table-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}

<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

Answer 5

table-layout:fixed将解决扩展单元格问题,但将创建一个新问题.IE默认情况下会隐藏溢出,但Mozilla会将其渲染到框外.

另一个解决方案是使用: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>

Answer 6

.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

致于http://www.blakems.com/archives/000077.html

Answer 7

我有一些td：

white-space: pre;

这为我解决了这个问题：

white-space: pre-wrap;

Answer 8

这对我有一些css框架(材料设计精简版[MDL]).

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

Answer 9

这非常有效：

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

<div您可以为所有的'使用相同的宽度，或者调整每种情况下的宽度以在您喜欢的任何位置中断文本。

这样你就不必浪费时间使用固定的表格宽度或复杂的 CSS。