0

I have an erb block that prints a list with two elements, a .list-number and an .list-item, and I'm inserting ...<br> after every .list-item. I want the list to display like so:

1. Item1...
2. Item2...
3. Really long
   item3...
4. Really really
   really long
   item4...
5. Item5...

But I'm having trouble with the display aspect. If I use display:inline-block like this:

//CSS
.list-number {position: relative; display: inline-block;)
.list-item {position: relative; max-width: 40px; display: inline-block;)

then the list prints like this:

1. Item1...
2. Item2...
   Really long
3. item3...
   Really really
   really long
4. item4...
5. Item5...

so the divs that extend past their limits expand upwards. And if I just replace display:inline-block with display:inline, then the max-width is ignored and the list-item just keeps going, like this:

1. Item1...
2. Item2...
3. Really long item3...
4. Really really really long item4...
5. Item5...

How can I get .list-item to be constrained by its max-width, but also expand downwards? I made a fiddle to illustrate the problem: http://jsfiddle.net/1ex75zvs/1/

Joe Morano
  • 1,715
  • 10
  • 50
  • 114
  • Please provide an example of the **actual** HTML becuase a proper `ol` ordered list with a max-width would do this automatically without `inline-block`. http://jsfiddle.net/1ex75zvs/3/ – Paulie_D Feb 21 '15 at 06:58

2 Answers2

1

I'm not sure why you are using inline-block and without an example of the actual HTML it's hard to be sure but a simple float would achieve this.

.item-number, .list-item {
    float: left;
}
.item-number {
    clear: both;
    margin-right: 10px;
}
.list-item {
    max-width:90px;
}
<div class="item-number">1</div>
<div class="list-item">lorem</div>
<div class="item-number">2</div>
<div class="list-item">Lorem ipsum dolor sit.</div>
<div class="item-number">3</div>
<div class="list-item">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="item-number">4</div>
<div class="list-item">lorem</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

You can do it using CSS' word-wrap; and add height: auto;

Fiddle

CSS

.list-item {
      word-wrap: break-word;
      height: auto;
}

Source

Source

Community
  • 1
  • 1
rick jan cawaling
  • 430
  • 3
  • 10
  • You re-posted the same fiddle I posted in my question. The code you added doesn't appear the behavior, in neither the 'inline' nor the 'inline-block' case. I updated my fiddle to demonstrate: http://jsfiddle.net/1ex75zvs/2/ – Joe Morano Feb 21 '15 at 06:43
  • It works with inline-block, or you only want to use display: inline? – rick jan cawaling Feb 21 '15 at 06:58