我有一个列表，其中包含单击链接时打开的详细信息部分。它在大多数情况下都能正常工作，但在某些极端情况下却不行。
我在代码中添加了注释来准确解释问题所在。
理想情况下，我想用 CSS 解决这个问题，但我已经在页面上使用了 javascript 和 jQuery，所以如果不能使用这些解决方案是可以的。
或者这里是html：
示例 1这就是它的外观。
<ul>
<li class='open'>
<div class='title'>
<a class='link'>details</a>
item 1
</div>
<div class='details'>
These details open when the details link is clicked
</div>
</li>
<li>
<div class='title'>
<a class='link'>details</a>
item 2
</div>
<div class='details'>
this is hidden
</div>
</li>
<li>
<div class='title'>
<a class='link'>details</a>
item 3
</div>
<div class='details'>
this is hidden
</div>
</li>
</ul>
示例 2如果名称太长，它应该将整个列表的宽度推得更宽，并且不会中断到下一行，背景会在其下方展开。相反，它覆盖了详细信息链接，而不是扩展背景。其他项目的详细信息链接也应向右移动，以便它们保持一致。
<ul>
<li class='open'>
<div class='title'>
<a class='link'>details</a>
item 1 with a very very very long name
</div>
<div class='details'>
These details open when the details link is clicked
</div>
</li>
<li>
<div class='title'>
<a class='link'>details</a>
item 2
</div>
<div class='details'>
this is hidden
</div>
</li>
</ul>
示例 3详细信息部分有时可以包含一个长 URL，该 URL 也不会中断。背景应该扩展以覆盖 url，详细信息链接向右移动以与 url 的末尾对齐。
<ul>
<li class='open'>
<div class='title'>
<a class='link'>details</a>
item 1
</div>
<div class='details'>
<div class='url'>
all this should be on one line: www.a-long-url
</div>
</div>
</li>
<li>
<div class='title'>
<a class='link'>details</a>
item 2
</div>
<div class='details'>
this is hidden
</div>
</li>
</ul>
和CSS：
.details {
display: none;
}
.open .details {
display: block;
}
.link {
text-decoration: underline;
float: right;
}
.title {
font-weight: bold;
white-space:nowrap;
}
.url {
white-space:nowrap;
}
ul {
list-style-type: none;
width: 15em;
}
li.open {
background-color: #c8d8ff;
border-radius: 2em;
}
li>div {
padding: 1em;
}