CSS 使订单项文本换行

Question

How can I extend the vertical size of a <li> when text wrapping is required, but keep a minimum value?

The look of this is exactly what I want when the text is short enough to fit on one line. But if the text is longer (I'm not expecting more than 2 lines), it gets cut.

My HTML looks like this:

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

My problem with changing .items li { height: 1.6em; }.items li { height: 1.6em; } to max-height is I end up with this:

I don't mind the messed up long string, but the height of the second <li> is now larger.

Answer 1

Try swapping height for 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>

Update:

To account for your follow-up comment: Since you're using a padding on the <li> element and you want the badge to occupy the full height without using position: absolute , remove the explicit height declaration from the badge and top: -4px and use negative margins instead:

 .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

If your li is too short for single-line cases, then min-height should do it (instead of height ). The element will take up a minimal height that you set and might expand if needed.

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