引导表响应无法正常工作-宽度问题

Question

I have problem with names, that are too long to fit in column, it looks like this:

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

I've tried to specify exactly max-width of element but it doesn't work well.

I would like to show only beginning of name, and whole name in title element,

My code for now looks like this:

<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

As a comment stated this is not the solution you asked for but an alternative, since cutting the name of the file down requires either JavaScript or some server side language, if you use one. If you specify the preferred way to solve this I can give a more in-depth solution.

The table seems to work as intended and although it is bad practice to have such long filenames, I understand that if you allow users to upload files on a website, you have no control over the filenames. So, the solution I would use in your case is some custom CSS:

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

This will make the filename split into two lines when needed.