CSS 使订单项文本换行

Question

当需要文本换行时，如何扩展<li>的垂直大小，但保持最小值？

当文本足够短以适合一行时，它的外观正是我想要的。 但如果文本较长（我预计不会超过 2 行），它就会被删减。

我的 HTML 看起来像这样：

 .items { margin: 0 0 2em 0; list-style-type: none; padding: 0em 0.5em; width: 20em; }.items li { cursor: pointer; position: relative; left: 0.2em; background-color: #EEE; margin: .3em; padding: .3em 0; height: 1.6em; border-radius: 4px; }.items li.test { font-weight: bold; }.items.badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; background-color: #607D8B; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; margin-right: .8em; border-radius: 4px 0 0 4px; width: 2em; }

 <ul class="items"> <li class="test"> <span class="badge">0</span> This is a long string that doesnt fit on one line. Need to extend this box vertically </li> <li class="test"> <span class="badge">0</span> Next item </li> </ul>

我改变.items li { height: 1.6em; }的问题 .items li { height: 1.6em; }到max-height是我最终得到这个：

我不介意弄乱的长字符串，但是第二个<li>的高度现在更大了。

Answer 1

尝试将height换成min-height ：

 .items { margin: 0 0 2em 0; list-style-type: none; padding: 0em 0.5em; width: 20em; }.items li { cursor: pointer; position: relative; left: 0.2em; background-color: #EEE; margin: .3em; padding: .3em 0; min-height: 1.6em; border-radius: 4px; }.items li.test { font-weight: bold; }

 <ul class="items"> <li class="test"> This is a long string that doesnt fit on one line. Need to extend this box vertically </li> <li class="test"> Next item </li> </ul>

更新：

考虑到您的后续评论：由于您在<li>元素上使用了填充，并且您希望徽章在不使用position: absolute的情况下占据整个高度，因此从徽章和top: -4px删除显式height声明：- top: -4px并改用负边距：

 .items { width: 20em; margin: 0 0 2em 0; padding: 0em 0.5em; list-style-type: none; }.items li { min-height: 1.6em; position: relative; left: 0.2em; margin: .3em; padding: .3em 0; background-color: #EEE; border-radius: 4px; cursor: pointer; }.items li.test { font-weight: bold; }.items.badge { color: white; font-size: small; line-height: 1em; width: 2em; display: inline-block; position: relative; left: -1px; margin-top: -4px; margin-bottom: -4px; margin-right: .8em; padding: 0.8em 0.7em; background-color: #607D8B; border-radius: 4px 0 0 4px; }

 <ul class="items"> <li class="test"> <span class="badge">0</span> This is a long string that doesnt fit on one line. Need to extend this box vertically </li> <li class="test"> <span class="badge">0</span> Next item </li> </ul>

Answer 2

如果您的li对于单行情况来说太短，那么min-height应该这样做（而不是height ）。 该元素将占用您设置的最小高度，并且可能会在需要时扩展。

 .items { margin: 0 0 2em 0; list-style-type: none; padding: 0em 0.5em; width: 20em; }.items li { cursor: pointer; position: relative; left: 0.2em; background-color: #EEE; margin: .3em; padding: .3em 0; min-height: 1.6em; /* Change this */ border-radius: 4px; }.items li.test { font-weight: bold; }

 <ul class="items"> <li class="test"> This is a long string that doesnt fit on one line. Need to extend this box vertically that is really something something something. </li> <li class="test"> This is a long string that doesnt fit on one line. Need to extend this box vertically </li> <li class="test"> Next item </li> </ul>

Answer 3

 .items { margin: 0 0 2em 0; list-style-type: none; padding: 0em 0.5em; width: 20em; }.items li { cursor: pointer; position: relative; left: 0.2em; background-color: #EEE; margin: .3em; padding: .3em 0; min-height: 1.6em; border-radius: 4px; }.items li.test { font-weight: bold; }

 <ul class="items"> <li class="test"> This is a long string that doesnt fit on one line. Need to extend this box vertically </li> <li class="test"> Next item </li> </ul>