CODEWITHSUNDEEP
htmlcsshtml-table
Joaquin McCoy
Joaquin McCoy

Reputation: 523

CSS layout issue with TABLE in DIV

Why doesn't the "aaaaaaaaa..." go to a new line and go out of div?

<head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

#container {
    background: #888888;
    color: white;
    width: 200px;
    padding: 20px;
}

#container li {
    list-style: none;
}

#container td {
    padding-right: 20px;
}
</style>
</head>

<div id="container">
<table>
    <tbody>
        <tr>
            <td>one</td>
            <td>
                <ul>
                    <li>two</li>
                    <li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>
</div>

Upvotes: 0

Views: 518

Answers (2)

crodjer
crodjer

Reputation: 13604

What you are looking for is css3 feature word wrap: http://www.css3.info/preview/word-wrap/

This have some browser compatibility issues but I think if you are determined to use such long words, this is an option.

This is a sample: http://jsfiddle.net/VXgdS/2/

Upvotes: 0

Hugo Migneron
Hugo Migneron

Reputation: 4907

If there aren't any spaces in your word then your table will expand to fit the word. There isn't much you can do about that (not with css anyway). Word wrap only works with actual word (i.e. with spaces in them).

A solution that will work for you though is to use the &shy; (soft hyphen)

<li>aaaaaaaaaaaaaaaaaa&shy;aaaaaaaaaaaaaaaaaaaa</li>

will break in the middle. It will only break there if it needs to - if it doesn't fit in the parent container.

There are a number of other solutions available, most of them are unreliable cross-browser or break your design:

The word break tag : <wbr> is unreliable. The overflow CSS statement will either break your design (overflow:auto) or hide content (overflow:hidden)

So basically, no easy solution. Soft-hyphen will work best if you can use it.

You could look into hyphenator, a way to automate work breaks like that on your website.

For your edit, if it's a variable then I would definitely with hyphenator.

Upvotes: 1

Related Questions