Label autowidth makes the td wider

Problem

I have a label inside a table td, the problem is that when the label width is greater than the td width the label grows in only one line, making the td greater and not allowing to see all the text. What I want is that the label make other line when it width is higher than its container.

css
.pdata {
font-size: 10px;
}

<table valign="top" cellspacing="0" cellpadding="0" border="0" height="150">
    <tbody>
        <tr valign="top">
            <td class="profile-company-text">

                <label class="pdata" ><label class="bold" style="width: 140px; display: inline-block">Email: </label><label data-bind="text: Email"></label>
                    <br>
                </label>

                </span>
            </td>
        </tr>
    </tbody>
</table>
Problem courtesy of: Diego Unanue

Solution

It sounds like what is happening is that your browser is resizing the table to give a "best-fit" to your content. If you'd like to enforce a maximum width to the table column that contains the label, use the CSS max-width attribute.

Unfortunately, there's really no way to definitively answer your question for several reasons.

In the example you give above, the "Email" label is pretty much never going to wrap (absent some other style that you haven't provided) because it's a single word with no breakable points such as hyphenation points or spaces. To minimize confusion, you should provide more information, such as a mockup of the desired output, and a code sample that actually reproduces the undesirable behavior.

In addition, the markup is a bit of a mess. If you're using a generator of some kind, make sure it's configured correctly. Some well-formedness issues that I see:

  1. Nesting labels is incorrect. Labels should contain only non-labelable content, other than the input with which a label is associated.
  2. You have a closing span tag with no opening span.

And finally, you should also consider some best practices to make your code more readable, more semantic, and easier to maintain:

  1. Don't use inline styles (e.g., the style attribute on the element). Assign classes as necessary in the markup and use an external stylesheet or a style block in the document head to apply presentation styles.
  2. Similar to above, don't use cellspacing, cellpadding, etc attributes on your table. Use the appropriate CSS attributes instead.
  3. You have a label with no associated input element. That's not the worst thing in the world, but the entire purpose of a label is to provide context for a form input. If you just want a block of text, use a more appropriate element such as p.
Solution courtesy of: Palpatim

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.