html - 如何在 Bootstrap 表中的 内换行或换行

Question

我有以下 Bootstrap 表:

   <div class="row"> 
     <div class="col-md-12" >   
         <table style="cursor:pointer;" class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <th>header1</th>
             </thead>
            <tbody>
                 <tr>
                     <td>
                         <div>
                             <ul>
                                 <li>
                                       <span>text1></span>
                                  </li>
                                 <li>
                                       <span>text3></span>
                                 </li>
                             </ul>
                             <span>some long text that i want to break</span>
                         </div>
                     </td>
                 </tr>
             </tbody>
        </table>
    </div>
  </div>

ul 标签内的跨度数是动态的，我不想包装它们。我想打破最后一个 span 标签内的内容，使它们以给定的宽度换行，我该怎么做？谢谢。

Answer 1

给 block 的跨度显示属性并像这样设置宽度:

.row span {
    width: 100px;
    display: block;
}

这是 jsfiddle http://jsfiddle.net/pF8vd/