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

Posted 2023-03-06

【中文标题】Bootstrap 3以响应方式截断表格行内的长文本

【英文标题】：Bootstrap 3 truncate long text inside rows of a table in a responsive way

【发布时间】：2014-06-19 08:44:15

【问题描述】：

我正在使用 bootstrap 3 表，当我将大文本放入表中时，它会被包裹在几行中，但我希望它以响应方式在末尾用三个点截断，而不会弄乱布局表（我找到了一些解决方案，但效果不佳）。

这可能吗？怎么样？

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

【参考方案1】：

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

.table 
  table-layout:fixed;


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

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

【讨论】：

我已经尝试过了；问题是表格布局不好，所有列的宽度都一样，我觉得不公平，我什至在我的帖子中提到过！

bootstrap 用来根据他的内容以一种非常好的方式为每一列分配宽度，我想尽可能地保持这种效果

我同意 Xsmael 的观点。固定布局不能解决这个问题。

【参考方案2】：

我是这样做的（你需要添加一个类 text 到 <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%;

并且它仍然是移动响应的（忘记它，layout=fixed）并且会保持原来的行为。

PS：当然 177px 是自定义尺寸（随便放什么）。

【讨论】：

我不得不切换到display: block 以删除这添加到表格行底部的一小部分空白。见***.com/questions/45588761/…

这种解决方案是否可以在不定义最大宽度但占用剩余可用空间的情况下实现？

@JelmerBrands 如果您的意思是“auto”（宽度）中的 cols，恐怕不是，否则浏览器将不知道何时应该截断文本。我不是 CSS 专家（我主要是开发人员），但我认为我没有错。另一方面，如果您固定了 X - 1 cols 的宽度（如 3 of 4），我猜这可能是可能的，但我认为容器（可能是表）应该在某处具有特定宽度。抱歉，我帮不了你。

@LucianoFantuzzi 从逻辑上讲，浏览器知道 A 列需要多少空间才能容纳列内的所有内容。考虑到屏幕的宽度，他知道他为 B 列留下了多少空间，并且如果 B 列中的文本超过该宽度，则相应地截断文本。不管怎么说，还是要谢谢你。希望有一个 CSS 导出能够解决这个问题。

@JelmerBrands 如果您成功了，请告诉我们您是如何做到的。浏览器知道所有列的宽度并根据内容安排空间。浏览器不知道显示“...”的限制是什么，除非您设置父容器的宽度。因此，如果您设置了 4 个 col 宽度中的 3 个，那么我想如果父容器设置为固定宽度，它将能够剥离内容。即：（100表格宽度，col1=25，col2=25，col3=25，col4=未指定，所以100-25*3=25，浏览器知道最后的col宽度）。

【参考方案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/

【参考方案4】：

我正在使用引导程序。 我使用了 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>