Question

我正在尝试构建一个表，正如您所看到的，它有两行。忽略@和{{}}代码。他们只是模仿引擎的东西。我的问题在于，每当我放置大文本而不是{{ $tournament->tournamentDescription }}时，它实际上会扩展我的整个表格，然后退出引导程序col-md-8并在其后重叠col-md-4。我尝试添加这个类：

.nested-item {
    word-wrap: break-word;
    overflow: auto;
}

JSFiddle：http://jsfiddle.net/ucbmk79v/

但它似乎没有用。这是我的HTML：

<div class="col-md-8">
            <h1>Tournaments Listing</h1>
            <table id="tournamentlist" class="display" style="max-width:100%">
            <thead>
            <tr>
                <th></th>
                <th>Tournament Name </th>
                <th>Creator</th>
                <th>Number of Players</th>
                <th>Number of Players</th>
                <th>Entrance Fee</th>
                <th>Game</th>
                <th>Platform</th>
                <th>Entry Type</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th></th>
                <th>Tournament Name </th>
                <th>Creator</th>
                <th>Number of Players</th>
                <th>Number of Players</th>
                <th>Entrance Fee</th>
                <th>Game</th>
                <th>Platform</th>
                <th>Entry Type</th>
            </tr>
            </tfoot>
            <tbody>
            @foreach($options['tournaments'] as $tournament)
            <tr role="row">
                <td class="details-control"></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->tournamentName }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->creator }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{$tournament->playercount}}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->noOfParticipants }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->entranceFee }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->game }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->gamePlatform }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->teamType }}</a></td> 
            </tr>
            <tr>
                <td colspan="9">
                    <table cellpadding="5" cellspacing="0" border="0" class="col-md-8">
                        <tbody>
                            <tr class="nested-item">
                                <td>Description:</td>
                                <td>{{ $tournament->tournamentDescription }}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            @endforeach
            </tbody>
            </table>
        </div>

Answer 1

word-wrap: break-word还不够。使用word-break: break-all确保在长或奇数“不可破解”字符串上实现的自动换行：

table tbody td {
   white-space: normal;
   word-wrap: break-word;
   word-break: break-all; 
}

演示：

table tbody td {
   white-space: normal;
   word-wrap: break-word;
   word-break: break-all; 
}

<div class="row">
    <div class="col-md-8">
            <h1>Tournaments Listing</h1>
            <table id="tournamentlist" class="display" style="max-width:100%">
            <thead>
            <tr>
                <th></th>
                <th>Tournament Name </th>
                <th>Creator</th>
                <th>Number of Players</th>
                <th>Number of Players</th>
                <th>Entrance Fee</th>
                <th>Game</th>
                <th>Platform</th>
                <th>Entry Type</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th></th>
                <th>Tournament Name </th>
                <th>Creator</th>
                <th>Number of Players</th>
                <th>Number of Players</th>
                <th>Entrance Fee</th>
                <th>Game</th>
                <th>Platform</th>
                <th>Entry Type</th>
            </tr>
            </tfoot>
            <tbody>
            @foreach($options['tournaments'] as $tournament)
            <tr role="row">
                <td class="details-control"></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->tournamentName }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->creator }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{$tournament->playercount}}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->noOfParticipants }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->entranceFee }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->game }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->gamePlatform }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->teamType }}</a></td> 
            </tr>
            <tr>
                <td colspan="9">
                    <table cellpadding="5" cellspacing="0" border="0" class="col-md-8">
                        <tbody>
                            <tr class="nested-item">
                                <td>Description:</td>
                                <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            @endforeach
            </tbody>
            </table>
  </div>
  <div class="col-md-4">
    Hi
  </div>
</div>

更新小提琴 - ＆gt;的 http://jsfiddle.net/ucbmk79v/4/

文本分解表

1 个答案: