Question

我的名字存在问题，这些名称太长而不适合列，它看起来像这样：

http://i.stack.imgur.com/1xwZz.png

我试图准确指定元素的最大宽度，但效果不佳。

我想只显示名称的开头，以及标题元素中的全名，

我现在的代码如下：

<div class="table-responsive">
<table class="table table-hover table-condensed table-striped">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>name</th>
            <th>size</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody id="List">
        <tr class="line1">
            <td class="">
                <img src="gfx/icons/image.png"></td>
            <td class="fileName">
                <a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.jpg</a>
            </td>
            <td class="fileSize">41.2 kB</td>
            <td class="delete">
                <a class="btn btn-danger btn-xs" href="#"><span class="glyphicon glyphicon-floppy-remove"></span></a>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

正如评论所述，这不是您要求的解决方案，而是替代方案，因为将文件名称缩小需要JavaScript或某种服务器端语言（如果您使用的话）。如果您指定解决此问题的首选方法，我可以提供更深入的解决方案。

该表似乎按预期工作，虽然拥有如此长的文件名是不好的做法，但我知道如果允许用户在网站上传文件，则无法控制文件名。因此，我将在您的案例中使用的解决方案是一些自定义CSS：

.filename a {
  word-break: break-all;
}

这将使文件名在需要时分成两行。

引导表响应不正常 - 宽度问题

1 个答案: