本文介绍了使用“word-wrap:break-word”在表内的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

文字的行为方式与Google Chrome(以及其他现代浏览器)完全一样:

This text behaves exactly the way I want on Google Chrome (and other modern browsers):

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
  <p>
    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </p>
</div>




  1. 当浏览器足够宽时,a +和b +在同一行。

  1. When the browser is wide enough, a+ and b+ are on the same line.

aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb


  • 在缩小浏览器范围时,将a +和b +放在不同的行上。

  • As you narrow the browser, a+ and b+ are put on separate lines.

    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    


  • 当b +不能再适合时, (总共三行)。

  • When b+ can no longer fit, it is broken and put on two lines (for a total of three lines).

    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbb
    bbbbbbbb
    


  • 这太棒了。

    然而,在我的情况下,这不是 div ,而是 p>

    In my situation, however, this is not a div but a table, like so:

    <table style="border:1px solid black; width:100%; word-wrap:break-word;">
      <tr>
        <td>
          <p>
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
          </p>
        </td>
      </tr>
    </table>
    

    在这种情况下,#1和#2发生,但不是#3。也就是说,在步骤2之后表停止变窄,并且步骤3不发生。

    In this case, #1 and #2 happen, but not #3. That is, the table stops narrowing after step 2 and step 3 doesn't ever happen. The break-word doesn't seem to be filtering down.

    有没有人知道如何让#3发生?该解决方案只需要在Chrome中工作,但它在其他浏览器中工作会更好。

    Does anyone know how make #3 happen? The solution only need work in Chrome, but it it also worked in other browsers that would be even better.

    不使用表格不起作用。

    P.S. "Don't use tables" is not helpful.

    推荐答案

    table-layout:fixed 将强制单元格适合表格(而不是相反),例如:

    table-layout: fixed will get force the cells to fit the table (and not the other way around), e.g.:

    <table style="border: 1px solid black; width: 100%; word-wrap:break-word;
                  table-layout: fixed;">
      <tr>
        <td>
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        </td>
      </tr>
    </table>
    

    这篇关于使用“word-wrap:break-word”在表内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    08-30 07:10