Question

我正在使用bootstrap 3表，当我在表格中放入大文本时，它会被包裹在几行上，但是我希望它以最快的方式截断三个点，而不会弄乱布局表（我发现了一些解决方案，但有令人不快的效果）。

这可能吗？怎么样？

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

Answer 1

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

.table {
  table-layout:fixed;
}

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

演示：http://bootply.com/9njmoY2CmS

Answer 2

我是这样做的（您需要将一个文字类添加到<td>并将文字放在<span>：

之间

<强> HTML

<td class="text"><span>looooooong teeeeeeeeext</span></td>

<强> SASS

.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 3

这是我所取得的成果，但必须设定宽度，而且不能是百分之。

.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>

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

Answer 4

我使用bootstrap 我使用了css参数。

.table {
  table-layout:fixed;
}

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

和bootstrap网格系统参数，如下所示。

<th class="col-sm-2">Name</th>

<td class="col-sm-2">hoge</td>

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

4 个答案: