HTML TD包装文本HTML TD包装文本(HTML TD wrap text)

2019-05-14 01:48发布

站内文章 / 后端开发

75 0

女 | 书童

私信

我想换行被添加到一些文本<td>元素。我曾尝试与style="word-wrap: break-word;" width="15%" style="word-wrap: break-word;" width="15%" 但它不是包装的文字。是否必须给它100％的宽度？我有其他控件来显示这样只有15％的宽度是可用的。

Answer 1:

为了总结TD文本

第一套表格样式

table{
    table-layout: fixed;
}

然后设置TD风格

td{
    word-wrap:break-word
}

Answer 2:

HTML表格支持“表格的布局：固定的”，可防止用户代理从适应列宽其内容CSS样式。你可能想使用它。

Answer 3:

我相信你所遇到表的捕捞22。表是非常适合在表格结构结束了内容，他们做“伸展”，以满足它们所包含的内容的需求，出色的工作。

默认情况下，表单元格将延伸到适合的内容...因此你的文字只是使它更广泛。

那里有几个解决方案。

1）你可以尝试在TD上设置一个最大宽度。

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

2）你可以尝试把你的文字在包装元素（如跨度），并在其上设置的限制。

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

要知道，虽然旧版本的IE不支持的最小/最大宽度。

由于IE不支持最大宽度本身就需要添加一个黑客，如果你想用它强制。有几种方法可以增加黑客攻击，这只是其中的一个。

在页面加载，对IE6只，拿到表的呈现宽度（以像素为单位），然后再得到那15％和应用，随着宽度的第一个TD在列（或TH如果你有头），以像素为单位。

Answer 4:

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 5:

.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 6:

这为我工作的一些CSS框架（材料设计精简版[MDL]）。

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

td {
  word-wrap: break-word;
}

Answer 7:

这个作品真的很好：

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

您可以使用相同的宽度为所有<div的，或在每种情况下调整宽度，无论你想打破你的文字。

这样，您就不必鬼混带固定式工作台宽度，或复杂的CSS。

Answer 8:

为了使单元格宽度完全相同的文字最长的一句话，只是设置单元格的宽度，以1px

即

td {
  width: 1px;
}

这是实验性的 ，我才知道这个而做的试验和错误

现场小提琴： http://jsfiddle.net/harshjv/5e2oLL8L/2/

Answer 9:

这是可能的，这可能会奏效，但它可能被证明是一个有点讨厌的在未来的某个时候（如果不立即）。

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

对于理span是，如由其他人指出的那样，一个<td>通常将扩展以容纳该内容，而<span>可以给出-and预期备存─设定宽度; 该overflow: hidden意图，但可能不是，隐藏否则将会导致<td>扩大。

我建议使用title跨度的性质表明，目前的文本（或夹）在视觉细胞，使文本仍然可用（如果你不希望/需要的人看到它，那么为什么有它摆在首位，我想...）。

此外，如果你定义的宽度为td {...}的TD将扩大（或潜在的合同，但我对此表示怀疑），以填补其隐含的宽度（在我看来，这似乎是table-width/number-of-cells ），指定表宽度似乎没有创造同样的问题。

不足之处是用于演示额外的标记。

Answer 10:

其实文字环绕在表自动发生。这个失策人提交而测试是假设假设一个长字符串，如“ggggggggggggggggggggggggggggggggggggggggggggggg”，并抱怨说，它不换行。实际上英文里没有这个词，它是此长，即使有，有一种淡淡的机会，它会内使用<td>

尝试使用类似“Counterposition是预先决定的情况下迷信”的句子测试。

Answer 11:

应用类的TDS，应用适当的宽度（记得给他们留下一个没有宽度，它假定宽度的剩余部分），然后应用适当的样式。复制和粘贴下面的代码到浏览器的编辑和视图来查看它的功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>

Answer 12:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>

Answer 13:

使用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>

文章来源: HTML TD wrap text