Bootstrap 3以响应的方式在表格的行内截断长文本
我使用的是bootsrap 3表格，当我把大文本放在表格中的时候，它被包装在几行上，但是我希望它能够以一个响应的方式在最后以三点截断，而不会搞乱表格的布局（我发现一些解决scheme，但有不愉快的效果）。
那可能吗 ？ 怎么样 ？
PS：任何解决scheme是受欢迎的，但我希望它只是HTML / CSS，如果可能的话。
我这样做（你需要添加一个类文本到<td>并把文本之间的<span> ：
HTML
<td class="text"><span>looooooong teeeeeeeeext</span></td>
上海社会科学院
.table td.text { max-width: 177px; span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; } }
相当于CSS
.table td.text { max-width: 177px; } .table td.text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; }
它仍然是移动响应（忘记它与布局=固定），并将保持原来的行为。
PS ：当然177px是一个自定义的大小（把你需要的任何东西）。
您需要使用table-layout:fixed为了使CSS省略号在表单元格上工作。
.table { table-layout:fixed; } .table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
演示 ： http : //bootply.com/9njmoY2CmS
这是我所取得的成就，但必须设定宽度，而不能百分之百。
.trunc{ width:250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table tr td { padding: 5px } table tr td { background: salmon } table tr td:first-child { background: lightsalmon }
<link href="ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <table> <tr> <td>Quisque dignissim ante in tincidunt gravida. Maecenas lectus turpis</td> <td> <div class="trunc">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. </div> </td> </tr> </table>
我正在使用bootstrap。
我用css参数。
.table { table-layout:fixed; } .table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
和自举网格系统参数，像这样。
<th class="col-sm-2">Name</th> <td class="col-sm-2">hoge</td>
