Jquery Mobile Table 在填充的单元格中有一个换行符

Question

我有一个与 jQuery 手机 table 有关的问题。我有一个 table 看起来像这样（在下面的代码中），它是水平滚动的，使用 floatThead.
固定 header 和一些 "td" 文本可以很长，例如文章描述。
目前它只使用完整的 space 并且不添加任何 'br'。
并且由于这种行为它减少了其他元素的可用 space 。顺便说一句，内容将被动态添加。

我现在的问题是，如果文本变得很长，是否可以在 "td" 这么长的文本中强制换行？ table 单元格内的某种 br?

 <div id="containerDiv">
<table class="ui-responsive ui-shadow gk-decorate tableClass" id="tableId" is="jqm-table" data-role="table">
  <thead>
    <tr>
      <th data-priority="1"><abbr>Header 1</abbr></th>
      <th data-priority="1"><abbr>Header 2</abbr></th>
      <th data-priority="1"><abbr>Header 3</abbr></th>
      <th data-priority="1"><abbr>Header 4</abbr></th>
      <th data-priority="1"><abbr>Header 5</abbr></th>
      <th data-priority="1"><abbr>Header 6</abbr></th>
    </tr>
  </thead>
  <tbody>
    <tr id="someId">
      <td>Content</td>
      <td>Content</td>
      <td>LooooooongContent</td>
      <td>RealllllllyLooooongContent</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr id="someId">
      <td>Content</td>
      <td>Content</td>
      <td>LooooooongContent</td>
      <td>RealllllllyLooooongContent</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr id="someId">
      <td>Content</td>
      <td>Content</td>
      <td>LooooooongContent</td>
      <td>RealllllllyLooooongContent</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr id="someId">
      <td>Content</td>
      <td>Content</td>
      <td>LooooooongContent</td>
      <td>RealllllllyLooooongContent</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr id="someId">
      <td>Content</td>
      <td>Content</td>
      <td>LooooooongContent</td>
      <td>RealllllllyLooooongContent</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Answer 1

按照目前的情况，<table> 正在尝试完美调整单元格的大小，因为没有设置宽度，您可以通过在 <th> 标签上设置宽度来实现。这样做会使带有白色 space 的元素自动以 <br /> 的方式换行。

因为您的示例中似乎没有白色 space。您可以像这样使用 word-break：

td {
  word-break: break-all;
}

我提供了一个 example，我厚颜无耻地不在 <th> 标签中添加宽度，而是懒惰地在 table 中添加宽度，但您可以看到使用 word-break

的结果

Jquery Mobile Table 在填充的单元格中有一个换行符

JqueryMobile Table with a Linebreak in a filled Cell

html

javascript

css

jquery

jquery-mobile