List item clamping

Question

After trying to add clamping to my headers, my result does not turn out the way I wanted.

I made a fiddle of the code that I am using to achieve my result: https://jsfiddle.net/73kerhsn/

h3
{
  margin: 0;
  font-size: 13px;
}

ul
{
  list-style: none;
  padding: 0;
  margin: 0;
}

li
{
  display: inline-block;
  margin: 2px;
  padding: 0;
}

.acontainer
{
  background-color: yellow;
  width: 500px;
  padding: 15px;
}

.background
{
  background-color: grey;
  width: 196px;
}

.block1
{
  height: 110px;
  width: 195px;
  background-color: red;
}

.clamp
{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="acontainer">
  <ul>
    <li class="background">
      <div class="block1">

      </div>
      <h3 class="clamp">
        This foo test asdas asdassd saasas dasasa asdasadsd asasddas asdadsg gfhfhg gddfd sddsfsdf
      </h3>
      <div>
        Something
      </div>
      <div>
        Something else
      </div>
    </li>
    <li class="background">
      <div class="block1">

      </div>
      <h3>
        This foo test
      </h3>
      <div>
        Something
      </div>
      <div>
        Something else
      </div>
    </li>
    <li class="background">
      <div class="block1">

      </div>
      <h3>
        This foo test
      </h3>
      <div>
        Something
      </div>
      <div>
        Something else
      </div>
    </li>
  </ul>
</div>

I want the list items to stay at the same height, even when the header tags get bigger than the ones of the other list items (so for example, the second list item in the jsfiddle appears to be lower from the top than the first list item. I want it to still stick to the top (with the padding still in tact)).

Is there anyone out there that can help me with this? Thanks in advance.

I don't understand.. You have different content and different height to each items, not setting the height of each item and still want them with equal height?! Or just stick the second item to the top. — Mosh Feu, Mar 14 '16 at 11:09
I do not wish to set a fixed height as the content of one of those list items could grow. Even when I would add a fixed height, this would not help either (at least as for as far as I got by fiddling). I do not specifically one to stick one list item to the top, I want all of them to stay on the same height of e.g. the parent tag. Thanks for the reference URL, will take a look. — Barrosy, Mar 14 '16 at 11:28

score 1 · Answer 1 · answered Mar 14 '16 at 11:25

1

You can just apply this to your css for styling the list-items:

li{
    display: inline-table;
}

This will make your li items start from the same height, now you can set the height as you want, it won't hamper your next line contents. If you won't set a fixed height, then only the start of the boxes will remain same.

answered Mar 14 '16 at 11:25

Abhishek Dhanraj Shahdeo

1,356
2
14
35

This property seems to work, althogh I am not sure if it is the best way to go to make a list item pretend to be an inline-table for this case. Thanks for your answer! – Barrosy Mar 14 '16 at 11:34
I have been using this property a lot and it doesn't create any problem even if you have to align your items row-wise. – Abhishek Dhanraj Shahdeo Mar 14 '16 at 11:43

score 1 · Accepted Answer · answered Mar 14 '16 at 11:30

1

You probably simply want to add vertical-align: top for your list items.

li
{
  display: inline-block;
  margin: 2px;
  padding: 0;
  vertical-align: top;
}

https://jsfiddle.net/73kerhsn/1/

answered Mar 14 '16 at 11:30

CBroe

91,630
14
92
150

I see so this is probably the property I have been looking for. Not sure if there are any downsides of using this property, but it looks to be working pretty well. – Barrosy Mar 14 '16 at 11:33

List item clamping

2 Answers2