Sharepoint - tables do not fit inside webpart - tables beyond their bounds (width)

Question

Large tables in sharepoint goes beyound their bounds. The main reason why the table breaks is that the filename (in title row) are very long without any spaces!

    <div class="fullWidth">
        <div class="halfWidth left bottomHalfWidthLeft">
            <div data-name="WebPartZone">
                <div>
                    <WebPartPages:WebPartZone runat="server" ID="xxxx" AllowPersonalization="False" FrameType="Default" Orientation="Vertical" Title="Middle Half Width Left"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
                </div>
            </div>
        </div>
        <div class="halfWidth right bottomHalfWidthRight">
            <div data-name="WebPartZone">
                <div>
                    <WebPartPages:WebPartZone runat="server" ID="xxxxx" AllowPersonalization="False" FrameType="Default" Orientation="Vertical" Title="Middle Half Width Right"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
                </div>
            </div>
        </div>
    </div>

If I have a table (standard document library) with 5 columns (that should fit inside the webpart) in div "Middle Half Width Left" it goes beyound the webpart width.

Does anyone know how SP is calculating table column width?

What I want is that the title column shrinks so the whole table fits inside the webpart.

I've tried (css) without any luck:

table {
  word-wrap: break-word; 
  table-layout:fixed;
  width: 100%;
}

Answer 1

I managed to use this selector (in stock SP 2010) to select the title anchors only:

td.ms-vb-title .ms-vb a

Using this you could style like so:

td.ms-vb-title .ms-vb a {
    word-break: break-all;
}

And it should break the titles up for you. However it will introduce an entirely new set of problems because it breaks at any letter even in regular spaced titles (see http://jsfiddle.net/48x8Y/).

A better solution might be to do some scripting magic though that would cause the content to flicker.

Here's a naive example using jQuery: http://jsfiddle.net/48x8Y/1/

Some alternative ideas:

• Measure out character lengths for each row and insert a space in the text just before it reaches the maximum width you want to allow. This requires that you measure the text length though which could be costly if you have many rows and/or are using older browsers.
• If you know the font and size you could also measure out the number of "m" characters that get you closest to the maximum length and insert a space after that number of characters, then hardcode that into your script.
• Ask the client to insert spaces in long titles when they upload documents ;)
• Do something fun with this: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow (don't have much experience with it though)

Note that none of these solutions are optimal though.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break