HTML表中的换行字_Html_Css_Html Table

HTML表中的换行字

html css

HTML表中的换行字,html,css,html-table,Html,Css,Html Table,我一直在使用wordwrap:break-word在divs和spans中包装文本。但是，它在表格单元格中似乎不起作用。我有一个表设置为宽度：100%，有一行两列。列中的文本虽然使用上述word wrap进行了样式设置，但不会进行换行。它使文本超出单元格的边界。这发生在Firefox、Google Chrome和Internet Explorer上以下是源代码的外观： td{ 边框：1px实心； } 哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦

我一直在使用

wordwrap:break-word

在

div

s和

span

s中包装文本。但是，它在表格单元格中似乎不起作用。我有一个表设置为

宽度：100%

，有一行两列。列中的文本虽然使用上述

word wrap

进行了样式设置，但不会进行换行。它使文本超出单元格的边界。这发生在Firefox、Google Chrome和Internet Explorer上

以下是源代码的外观：

td{
边框：1px实心；
}


哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦
短词

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

表格单元格

：

td {
   display: table-cell;
}

很长一段时间，但再次检查（或类似）您是否意外继承了以下规则：

white-space:nowrap;

您指定的换行行为。

结果表明，没有好的方法可以做到这一点。最接近我的是在表格周围的div中添加“overflow:hidden；”并丢失文本。但真正的解决办法似乎是丢掉桌子。使用div和相对定位，我能够实现相同的效果，减去

2015更新：这是为像我这样想要这个答案的人准备的。6年后，多亏了所有的贡献者，这一切都成功了

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

longtextwithoutspace

或

longtextwithoutspace

以下内容在InternetExplorer中对我很有用。注意添加了

表布局：fixed

CSS属性

td{
边框：1px实心；
}


隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆隆

问题

<td style="word-break:break-all;">longtextwithoutspace</td>


卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢卢；oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；呜呜，呜呜，呜呜
短词

如前所述，将文本放在

div

中几乎有效。您只需指定

div的宽度
，这对于静态布局来说是幸运的
这适用于FF 3.6，即8，Chrome
<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>


longtexthere
退房


LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLong
福
在IE 8和Chrome 13中测试
<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

唯一需要做的是根据您想要实现的布局，为
或
内部的
添加宽度
例如：

loooooooodasdasdasdasddddddddddddddddddddddddddddasdasdasdasdang单词
福

或

loooooooodasdasdasdasddddddddddddddddddddddddddddasdasdasdasdang单词
福
似乎您需要设置换行：断开单词div
）上的代码>，具有指定的（非相对）宽度。例：


OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
福
与Google Chrome和Firefox（未经InternetExplorer测试）配合使用的解决方案是将显示：表格单元格
设置为块元素。
我找到了一个似乎在Firefox、Google Chrome和InternetExplorer 7-9中都能使用的解决方案。用于进行单面有长文本的两列表格布局。我到处都在寻找类似的问题，一个浏览器的工作方式破坏了另一个浏览器，或者在一个表中添加更多的标记似乎是糟糕的编码
我没有用桌子来做这个。去营救。至少对于固定两列布局而言，这基本上是一个词汇表/词典/词义设置
还有一些通用的样式

dl{
边缘底部：50px；
}
dl-dt{
背景：#ccc；
颜色：#fff；
浮动：左；
字体大小：粗体；
右边距：10px；
填充物：5px；
宽度：100px；
}
dl-dd{
边际：2px0；
填充：5px0；
单词包装：打断单词；
左边距：120像素；
}

测试1
暂时性或暂时性心脏病
测试2
镰刀菌
最长的
Loremipsumdolorsitameturetapingemipsumdolorsitametconcectureelit.Nulla
laoreet ante et turpis vulpute调味品。在Elite nisl。镰刀菌
我必须暂时坐在康瓦尔河对岸。维维拉芸香，
在矢状位的爱神元素中。一个社会阶层
根据conubia nostra的扭矩，根据。
赢得奖金的答案是正确的，但如果表的第一行有一个合并/合并的单元格（所有单元格的宽度相等），则该答案无效
在这种情况下，应使用colgroup
和col
标记正确显示：
<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>


合并单元
此单元格中的verylongword
第2单元
这对我很有用：
<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }


运输署{
/*CSS 3*/
空白：-o形预包装；
<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

<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" >

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

word-wrap: break-word;

word-break:break-all;

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

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

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

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

white-space: pre-wrap;
word-wrap: break-word;

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