Question

我有一个用数据库中的数据填充的表。基本的表格布局如下：

<table class="cssTable">
  <tr>
    <td class="cssRowCell1">1.</td>
    <td class="cssRowCell2">Data here</td>
  </tr>
</table>

问题是，如果数据库包含一长串文本而没有任何空格，则文本不会包裹在页面周围，而是从页面的右侧伸出。

我尝试了以下操作，但这些都没有奏效：

1在CSS中添加了以下内容：

.cssRowCell2
{
    min-width: 880px;
    word-wrap: break-word;
    overflow: hidden;
}

2尝试添加显式表格宽度：

<td class="cssRowCell1" width="2%">1.</td>
<td class="cssRowCell2" width="98%">Data here</td>

知道如何让它看起来很好吗？

Answer 1

嗯，这里有一个很好的图书馆：它被称为Hyphenator。）我建议查看this discussion，因为它评论很好。顺便说一句，老问题。）

Answer 2

要在单词中指定可选的连字点（使用英语或其他允许连字的语言），请插入SOFT HYPHEN U + 00A0字符或等效实体引用。

要在字符串中指定可选的直接换行符（如foo / bar / zap），请插入标记<wbr>，这是W3C推荐所不赞成的，但如果采取了一些预防措施，则效果很好（{ {3}}）。

除了这些可靠（虽然笨拙）的方法之外，您可以考虑使用频率较低（但更优雅）的方法，例如CSS规则hyphens: auto以及语言声明。

Answer 3

您是否尝试过玩white-space？

Answer 4

使用以下可能对您有所帮助的代码。

<table border="1" cellspacing="0" cellpadding="0" class="cssTable" style="table-layout:fixed" width="100%">
  <tr>
    <td width="8%" class="cssRowCell1">1.</td>
    <td width="92%" class="cssRowCell2">Data here   
    </td>
  </tr>
</table>

我刚刚在表标记上添加了style="table-layout:fixed"并设置了宽度100%，完全取决于您要为列设置多少宽度。

注意： Css与您提到的相同。

Answer 5

除了表格单元样式表＆＃34;自动换行：break-word;＆＃34; ，添加＆＃34; table-layout：fixed＆＃34; 在您的表样式表中。它会起作用。

在HTML表格中进行文字自动换行

5 个答案: