使用以下 HTML 和 CSS3 规则,我试图确保遵守以下标准:
我的所有标准都有效,除了第 1 项,孩子们超出了他们父母的宽度。问题:如何让孩子留在父母身边?
- li 项目不能超过其父宽度,即 400px
- img、label 和 currency 内容必须在它们的范围内垂直居中
- 货币不应换行,应始终完整显示
- 货币应始终尽可能靠近标签跨度显示。
- 标签文本应固定在 2 行,并在超过 2 行的地方显示省略号。
注意:只需要在 Chrome 和 Safari 基于 webkit 的浏览器中工作。
它应该看起来像:
但是,它现在看起来像这样:
有任何想法吗?
************************ JS Fiddle 示例************************
<ul>
<li>
<span class="img"></span>
<span class="label">Acclaim</span>
<span class="currency">(USD 50)</span>
</li>
<li>
<span class="img"></span>
<span class="label">Acclaim 1 11 111 1111 11111</span>
<span class="currency">(USD 50)</span>
</li>
<li>
<span class="img"></span>
<span class="label">Acclaim 1 11 111 1111 11111 2 22222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 5 55 555 5555 55555 6 66 666 6666 66666</span>
<span class="currency">(USD 50)</span>
</li>
</ul>
ul {
width: 400px;
background-color: yellow;
padding: 0;
margin: 0;
}
li {
display: -webkit-box;
padding-right: 50px;
}
.label {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
word-wrap: break-word;
line-height: 1.3em;
margin-right: 0.2em;
background-color: pink;
}
.currency {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
white-space: nowrap;
background-color: lightgreen;
}
.img {
display: block;
width: 40px;
height: 40px;
margin-right: 0.1em;
background-image:url('data:image/png;base64,iVBOR...);
}