关于table设置换行的处理

最新推荐文章于 2025-07-08 23:56:41 发布

原创最新推荐文章于 2025-07-08 23:56:41 发布 · 8.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #表格英文换行

CSS 同时被 2 个专栏收录

4 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

在固定宽度的HTML表格中，如何处理英文换行以保持表格尺寸不变？本文通过三个示例，介绍如何在不破坏单词完整性的情况下，实现表格内容的自动换行，关键在于应用`word-break: break-all; word-wrap: break-word;`的CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做html表格的时候，当固定了宽度的table，里面存在英文的时候，换行会检测英文，保留完整的单词。但是有时候我们不想自己的表格大小发生变化，应该怎么做呢？现在我们就这种情况下面的三个例子来说明一下。

table宽度固定为210px。
例子一：正常情况下的表格显示样式。

<p>例子一</p>
<table  style=" width: 210px" border="1"cellspacing="0" cellpadding="0">
    <tr >
        <th >aa</th>
        <th >bb</th>

    </tr>
    <tr >
        <td>aaaaa</td>
        <td>aaaaa</td>
    </tr>
</table>

例子二：表格为了完整的显示表格中的英文单词，所以表格会被拉长。

<p>例子二</p>
<table style="width: 210px" border="1"cellspacing="0" cellpadding="0">
    <tr >
        <th >aa</th>
        <th >bb</th>

    </tr>
    <tr >
        <td >aaaaaaaaaaa aaaaaaaaaaaaa</td>
        <td>hello world,You are so beautiful.helohelohelohelohelo</td>

    </tr>
</table>

例子三：设置表格随意换行（会把英文单词切割两行显示）,以保证表格大小不发生变化。

<table style="width: 210px;  word-break: break-all; word-wrap: break-word" border="1" cellspacing="0" cellpadding="0">
    <tr >
        <th >aa</th>
        <th >bb</th>

    </tr>
    <tr >
        <td >aaaaaaaaaaa aaaaaaaaaaaaa</td>
        <td>hello world,You are so beautiful.</td>

    </tr>
</table>
</body>

三个例子显示结果比较：

实现例子三的效果主要是加上word-break:break-all; word-wrap:break的style类型。