Html 文本断开表

我试图构建一个表，正如您所看到的，它有两行。忽略@和{}代码。他们只是模板引擎的东西。我的问题是，每当我放置大文本而不是

{{{$tourrent->tournamentDescription}

，它实际上会扩展我的整个表，并退出引导

col-md-8

，并在它之后重叠

col-md-4

。我尝试添加此类：

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

JSFiddle：

但它似乎不起作用。这是我的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>

锦标赛名单
锦标赛名称
造物主
球员人数
球员人数
入场费
游戏
站台
条目类型
锦标赛名称
造物主
球员人数
球员人数
入场费
游戏
站台
条目类型
@foreach（$options['tournames']作为$tournams）
说明：
{{$tournal->tournamentDescription}
@endforeach

换行：仅断开单词是不够的。使用
wordbreak:break all
确保在长字符串或奇数“不可中断”字符串上实际执行换行操作：

表tbody td{
空白：正常；
单词包装：打断单词；
单词break：打破一切；
}

演示：


表tbody td{
空白：正常；
单词包装：打断单词；
单词break：打破一切；
}

锦标赛名单
锦标赛名称
造物主
球员人数
球员人数
入场费
游戏
站台
条目类型
锦标赛名称
造物主
球员人数
球员人数
入场费
游戏
站台
条目类型
@foreach（$options['tournames']作为$tournams）
说明：
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行
@endforeach
你好
此处的浏览器支持参考：