logo标签列表

HTML表格中的自动换行

htmlcsshtml-table
662

我一直在使用word-wrap: break-word来换行

和中的文本。但是，在表格单元格中似乎不起作用。我的表格设置为width:100%，有一行和两列。虽然使用了上述word-wrap对列中的文本进行了样式设置，但是文本并没有换行。这导致文本超出了单元格的边界。这在Firefox、Google Chrome和Internet Explorer上都会发生。

以下是源代码：

td {
  border: 1px solid;
}
<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

上面的长单词比我的页面边界还要大，但它不会破坏上面的HTML。我尝试了下面的建议，添加text-wrap:suppress和text-wrap:normal，但都没有帮助。

<tr> <td style="text-wrap:normal;word-wrap:break-word"> 这是一份演示文稿。 </td> </tr> - KV Prajapati
不幸的是，那里的文本来自用户生成的内容。当然，我可以预处理它并添加连字符，但我希望有更好的方法。 - psychotik
你真的在使用 <code>break-wor<em>k</em></code> 吗？也许这与它有关。 - Ms2ger
1
如果您在这里，您可能还想查看 white-space: pre-wrap https://developer.mozilla.org/en-US/docs/Web/CSS/white-space - Tom Prats
考虑添加<wbr>标签。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr - Darth Egregious
显示剩余3条评论
30个回答
4

我发现了一种解决方案，似乎能在Firefox、Google Chrome和Internet Explorer 7-9中起作用。用于在一侧具有长文本的情况下进行双栏表格布局。我在各处搜索类似的问题，但在一个浏览器中有效的方法在其他浏览器中会出现问题，或者向表格添加更多标签只会导致糟糕的编码。

我没有使用表格来实现这个功能。DL DT DD拯救了我，至少对于修复双栏布局，它基本上是一个词汇表/字典/单词含义设置。

同时加入一些通用的样式。

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }
<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

使用浮动的word-wrap和margin-left，我得到了我需要的东西。只是想与其他人分享这个方法，也许它能帮助有困难的人实现两列定义样式布局，并使单词换行更加顺畅。
我尝试在表格单元格中使用word-wrap，但它只在Internet Explorer 9中起作用（当然还有Firefox和Google Chrome），主要是为了修复破损的Internet Explorer浏览器。
4

我有同样的问题，这对我有效。

 <style> 
      td{
            word-break: break-word;
      }
    </style>
    <table style="width: 100%;">
      <tr>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</td>
        <td><span style="display: inline;">Short word</span></td>
      </tr>
    </table>
1
今天在Chrome上运行时，它可以不改变表格样式而正常工作。 - Aftershock
1

默认情况下，表格会自动换行，因此请确保表格单元格的显示为table-cell：

td {
   display: table-cell;
}
-1; 任何 HTML 元素默认情况下都会被包装，而不仅仅是表格。这里的建议实际上没有任何意义。 - Mark Amery
这不是一个答案，应该远低于附加它的答案。 - Husk Rekoms
1

样式="表格布局：固定；宽度：98%；换行：断词" 

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

演示 - http://jsfiddle.net/Ne4BR/749/

这对我非常有效。 我有很长的链接，会导致表格在Web浏览器上超过100％。 已在IE，Chrome，Android和Safari上进行测试。

这基本上是一个副本，与 得票最高的答案 相同; 在这两种情况下，解决方案归结为“使用 table-layout: fixed”。 - Mark Amery
0
在我的情况下，我不得不使用单词断点和空格预包装的组合来实现最佳效果。希望它能帮助更多人。
<td class="wrap-longtext">
   long,longlonglonglonglonglonglong..................
</td>

<style>    
  .wrap-longtext
  {
    word-break: break-all;/* Use break-word, if you prefer sensible text than short width of the cell */
    white-space: pre-wrap;
  }
</style>
0

如果您只关心文本，那么可以不使用table-layout:fixed

<table>
<tr>
  <td>
    Title
  </td>
  <td>
    Length
  </td>
  <td>
    Action
  </td>
  </tr>

  <tr>
  <td>
    Long song name
  </td>
  <td>
    3:11
  </td>
  <td>
    <button>
    Buy Now!
    </button>
  </td>
  
</tr>

<tr>
  <td  colspan=3>
    <div style='width:200px;background-color:lime;margin-left:20px'>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>quick </div>
      <div style='float:left;white-space:pre'>brown </div>
      <div style='float:left;white-space:pre'>foxed </div>
      <div style='float:left;white-space:pre'>jumped </div>
      <div style='float:left;white-space:pre'>over </div>
      <div style='float:left;white-space:pre'>the </div>

      <div style='float:left;white-space:pre'>lazy </div>
      <div style='float:left;white-space:pre'>brown </div>
      <div style='float:left;white-space:pre'>cat </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>

      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
    
    </div>
    
  </td>
</tr>


  <tr>
  <td>
    Long song name1
  </td>
  <td>
    2:20
  </td>
  <td>
    <button>
    Buy Now!
    </button>
  </td>
  
</tr>


</table>
0
一个适用于Google Chrome和Firefox（未在Internet Explorer上测试）的解决方案是将display: table-cell设置为块元素。
0

只需添加宽度即可。这对我很有效。

     <td style="width:10%;"><strong>Item Name</strong></td>
0

如果适合您，您可以尝试这个...

在您的td中放置一个textarea，并将其禁用，背景颜色设置为白色，并定义其行数。

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>
0

看起来您在使用word-wrap: break-word; CSS属性时，表格单元格中仍然存在换行问题。可能的原因之一是表格元素具有自己的布局规则，这些规则可能会覆盖您在单个单元格上设置的属性。

要解决此问题，您可以尝试将表格元素的table-layout属性设置为fixed，这将强制表格单元格具有固定的宽度和高度，并允许word-wrap正常工作。

以下是添加了table-layout属性的代码的更新版本：

<style>
  td {
    border: 1px solid;
  }
  table {
    width: 100%;
    table-layout: fixed; /* Add this line */
  }
</style>
<table>
  <tr>
    <td>
      <div style="word-wrap: break-word;">
    Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
  </div>
</td>
<td>
  <span style="display: inline;">Short word</span>
</td>

抱歉代码没有很好地缩进

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接