html - Bootstrap 表响应无法正常工作-宽度问题

Question

我的名称有问题，名称太长而无法容纳在列中，它看起来像这样：

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

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

我只想在title元素中显示名称的开头和全名，

我的代码现在看起来像这样：

<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;
}

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