Bootstrap 3以响应的方式截断表格行内的长文本

Question

我正在使用bootstrap 3表，当我把大文本放在表格中时，它会被包裹在几行上，但是我希望它以一个响应的方式在末尾截断三个点，而不会弄乱表格的布局（我找到一些解决方案，但有令人不快的影响）。

那可能吗 ？怎么样 ？

PS：欢迎任何解决方案，但我希望它只是HTML / CSS，如果可能的话。

Answer 1

我是这样做的（你需要在<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是一个自定义尺寸（放置你需要的任何东西）。

Answer 2

您需要使用table-layout:fixed才能使CSS省略号处理表格单元格。

.table {
  table-layout:fixed;
}

.table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

但是：ぁzxswい

Answer 3

这就是我所取得的成就，但不得不设定宽度，而且不能是百分比。

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="https://maxcdn.bootstrapcdn.com/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>

Answer 4

我正在使用bootstrap。 我用过css参数。

http://collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/

和bootstrap网格系统参数，像这样。

.table {
  table-layout:fixed;
}

.table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}