0

我有一个标题/值列表。我在想一个定义列表是要走的路。我希望标题和定义在同一行，并且我不希望标题彼此具有相同的宽度，但每个标题的宽度都取决于标题中的文本量。我还希望定义保留在它们的块内，而不是在标题下流血。最后，我希望它可以与 IE7 及更高版本一起使用。

好的，我想出了以下 HTML/CSS，它几乎可以工作。我在http://jsfiddle.net/s45Kd/上有一个实时示例，因为我不知道如何在 stackoverflow 窗口中添加 CSS（可能吗？）。两个问题。

首先，即使定义中没有任何空格（即“电子邮件”），我如何强制定义中断？

其次，为什么长定义最终会在标题下流血（即“某些文本”）？

虽然我会很感激“只是这样做”，但我更多的是寻找为什么会发生这种情况，以便我更好地理解。

谢谢

<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>
4

1 回答 1

4

首先，可以通过设置来解决自动换行：

word-wrap: break-word;

对于第二个，关键是同时设置overflow: hidden;和dt元素dd，同时仍然只浮动dt.

这个 jsFiddle 中的演示：http: //jsfiddle.net/fLPej/108/

于 2013-03-31T19:31:41.273 回答