定义列表的CSS样式

Question

I have a list of title/values. I am thinking a definition list is the way to go. I want the title and definition to be on the same line, and I do not want the titles to have the same width of each other, but for each to have it's width based on the amount of text in the title. I also want the definitions to stay within their blocks, and not to bleed under the title. Lastly, I want it to work with IE7 and greater.

Okay, I come up with the following HTML/CSS, and it almost works. I have a live example at http://jsfiddle.net/s45Kd/ since I couldn't figure out how to add CSS with the stackoverflow window (is it possible?). Two problems.

First, how do I force definitions to break even if they do not have any white-space in them (ie "email")?

Second, why do long definitions eventually bleed under the title (ie "some text")?

While I would appreciate a "just do this", I am more looking for why this happens so I better understand.

Thank you

<style type="text/css">
    dl,dt,dd {padding:0;margin:0;}
    dl {width:200px;border:1px dashed black;}
    dt {float:left;font-weight:bolder; padding-right:5px; border:1px dashed red;}
    dd {border:1px dashed blue;}
</style> 
<dl>
    <dt>First Name:</dt><dd>Bob</dd>
    <dt>Last Name:</dt><dd>Johnson</dd>
    <dt>Email:</dt><dd>bob.johnson@stackoverflow.com</dd>
    <dt>Phone Number:</dt><dd>(555) 555-1212</dd>
    <dt>Some Text:</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    <dt>Birthday</dt><dd>January 1st</dd>
</dl>

Answer 1

For the first, the word wrap can be solved by setting:

word-wrap: break-word;

For the second, the key is to set overflow: hidden; on both the dt and dd elements, while still floating only the dt .

Demo in this jsFiddle: http://jsfiddle.net/fLPej/108/