代码之家  ›  专栏  ›  技术社区  ›  Richard Bender

引导表中充斥着长而不带空格的文本

  •  70
  • Richard Bender  · 技术社区  · 12 年前

    我使用Bootstrap,我有一个有几列的表,最后一列有时有一段没有空格的长文本。我注意到,在特定的屏幕大小下,表会溢出其父div,并与同级表产生难看的重叠。

    我玩了它,我认为问题在于文本没有节奏。我创建了一个 jsfiddle 这说明了我的意思。

    正如您所看到的,最左上角的表表现良好,只是垂直增长以容纳更多的文本。但是,由于长而无空格的文本,左下表会导致右侧溢出,并且左下表的右侧列最终“位于”其同级表之下。

    有人能告诉我如何解决这个问题,以便将很长的文本剪裁或部分拆分到新行上吗?

    5 回复  |  直到 12 年前
        1
  •  132
  •   BenKoshy Mayinx    5 年前
    .the-table {
        table-layout: fixed;
        word-wrap: break-word;
    }
    

    弃用(即换行)

    将以下样式添加到您的 <table>

    .the-table {
        table-layout: fixed;
        over-flow: break-word;
    }
    

    然后,您可以根据需要通过CSS调整布局。

        2
  •  27
  •   Kate Kasinskaya    8 年前

    这在不强制固定表格布局的情况下起作用 只需将其添加到td或任何

    .is-breakable {
      word-break: break-word;
    }
    
        3
  •  6
  •   Justin Ipson    7 年前

    我在Internet Explorer中使用这些解决方案时遇到了问题。

    我用了以下的风格使它最终发挥作用。

    <td style="word-break: break-all">
    
        4
  •  3
  •   Rahul Godara    7 年前

    你可以使用下面的css。这将包装文本并应用。。。在文末。

    例如This_is_a_lage_text将更改为This_is_a_lar。。。

    td {
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    

    您也可以添加工具提示来显示完整的文本值。

    <td data-toggle="tooltip" title="${text}">${text}</td>
    
        5
  •  0
  •   Saurabh Valsangkar    6 年前

    阿尔伯斯的回答对我很有帮助

    .the-table {
     table-layout: fixed;
     word-wrap: break-word;
    }
    

    在JS中动态加载它添加

     $("#"  + tableName ).addClass('the-table'); 
    

    希望它能有所帮助!!