Make element height inversely proportional to width- pure css

by woah • 13 years ago

3 3 13 years ago

jdavid• 13 years ago

Maybe you can explain a bit better what this does?

It looks like the content is resizing in chrome based on the number of characters in the :before tag. is that right?

So in this case the width is a percentage of the total, but the height is determined by the total number of chars in the :before

woah2• 13 years ago

Yea, the width is a percentage. It's meant to simulate a fluid grid. I'm working on a site right now that has a row of boxes with excerpts of longer articles. I would like them to all have the same height for neatness, but I don't want to set an explicit height because I would like them to resize to contain roughly the same amount of text at different widths.

So the :before pseudoelement on #container has a bunch of _'s and spaces that reflow like any text will. #element has the actual content, and is absolutely positioned to the edges of its parent.

So as the width changes, the text in the :before element reflows and expands #container's size. #element simply follows the size of #container. The :after pseudoelement is just there for decoration.

woah2• 13 years ago

Wrote a stylus function that automatically applies the right properties to achieve this effect:

    fake-truncate(num)
      fill(num)
        buf = ''
        for index in 1..num
          buf += '_ '

      position: relative
      overflow: hidden

      &:before
        content: fill(num)
        visibility: hidden
        display: block

      ._content
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0

Make element height inversely proportional to width- pure css

Related Stories