css variable width div within a fixed width div

Question

Context: (simplified)

<div style="width:300px;" >
    <img src="blabla..." />
    <div style="oveflow:hidden; etc..." >
        description
    </div>
</div>

Problem:
Sometimes the description can be very long and gets cut (intended, see "overflow:hidden;"). So I made it so that when the user hover the description a css animation pushes the description to the left side a bit, let's say "margin-left:-200px;". This way the user can continue reading the description while it reveals itself (css animate).
Now comes the issue: the description can vary from long to very long to very very long. And obviously pushing it to the left for -200px is sometimes not enough, sometimes too much.

Solutions I know:
1)

Javascript/jQuery

My website is full non-js and very lightweight, I do not want to use js. I found many solutions on the web using js, I already know them. Please respect this. I would love to solve it via pure css.

2)

<marquee>description</marquee>

Depreciated.

Ideas:
I was thinking about "tricking" it using PHP code. For example I would calculate the description's length so that I could set a "margin-left:-???px;" accordingly. Now that sounds even uglier than js to me, forcing me to "hardcode" it in the php file bypassing the conveniant css stylesheet and resulting in a heavy php file. Irrelevant.
I didn't find anything in the CSS3 about it eventhough many other designers came accross this issue from what I could find searching on GG. Is it beyond css language's scope?
Thank you.

PS: my description MUST fit in 1 line. No line break, no scrollbar, no "show more" button, etc.

Have you considered how this will work with touch on mobile devices? — Ruskin
– Ruskin, Commented Sep 13, 2015 at 7:45
This problem has been solved by amazon / trip advisor etc on reviews - see how they did it. Note how they use a gradient at bottom to give visual cue that there is more content hidden — Ruskin
– Ruskin, Commented Sep 13, 2015 at 7:47
Allow me to insist: My description must fit in 1 line. I don't want tricks such as a toggle on/off link to "show more". Yes, I did consider touchscreen devices: they won't be displayed the description. As I said, I'm very short on space for the descriptions within these particular divs. Basically, the whole description must fit within a 300*15px div. — David Zalmann
– David Zalmann, Commented Sep 13, 2015 at 8:26
Are you just designing for one platform / browser / machine then? I strongly suggest you do some user testing to see if your design works. If you have not yet discovered it, Krug's Rocket Surgery book is a great start. — Ruskin
– Ruskin, Commented Sep 13, 2015 at 8:35

aimme · Accepted Answer · 2015-09-13 05:43:05Z

1

you could use echo <br/> with php when a certain length is reached each time.
you could use css max-width property to restrict the width to a certain amount

answered Sep 13, 2015 at 5:43

aimme

6,9087 gold badges54 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Zalmann Over a year ago

My description must fit in 1 line.

aimme Over a year ago

so count the content. make the font-size small.

NubPro · Accepted Answer · 2015-09-13 05:51:57Z

1

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

p.test {
word-wrap: break-word;
}

Is this what you're looking for?

answered Sep 13, 2015 at 5:51

NubPro

5152 silver badges9 bronze badges

1 Comment

David Zalmann Over a year ago

Nope. My description must fit in 1 line. Thank you for trying.

Paulie_D · Accepted Answer · 2015-09-13 10:17:07Z

0

Closest I could come.

I am slightly concerned that the slide eventually end with the description hidden but I think that's a small price to pay...otherwise I think it meets most of the criteria

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  width: 300px;
  margin: 1em auto;
  border:1px solid green;
  display: flex;
  flex-direction: column;
}

.wrap img {
  max-height:100%;
  width: auto;
}

.desc {
  width: 300px;
  height: 15px;
  white-space:nowrap;
  overflow: hidden;
  font-size:13px;
  line-height: 15px;
  position: relative;
}
.wrap .desc p{
  position: absolute;
  transform: translateX(0);
  transition: transform 5s ease;
}

.wrap:hover .desc p{
  transform: translateX(-100%);
}

<div class="wrap" >
  <div class="image">
    <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" alt="" />
  </div>
    <div class="desc" >
        <p>Tri-tip shank turkey chuck, porchetta drumstick andouille beef ribs prosciutto salami beef. Ham hock pork belly pig pastrami. </p>
    </div>
</div>

Codepen Demo

answered Sep 13, 2015 at 10:17

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

2 Comments

David Zalmann Over a year ago

That is as close as we can get using css apparently. Thank you for the "display:flex;", I never heard about it. IE<10 does not support it but it's ok.

Paulie_D Over a year ago

Well the layout could be done without flexbox...any normal method would work...I just default to flexbox these days. :)

razorranjan · Accepted Answer · 2015-09-13 06:52:33Z

0

What i would suggest you is fix the width and height of the description div and use the css property overflow-y:auto.

The default scrollbar is ugly and different for all the browsers so you may try a js plugin but as you said you don't want to add a library just to achieve a small task.:)

answered Sep 13, 2015 at 6:52

razorranjan

889 bronze badges

4 Comments

David Zalmann Over a year ago

This does not lead to what I'm trying to achieve. I'm very short in space for that description div. I dont want neither line brakes nor scrollbars :(

razorranjan Over a year ago

can you show me the exact proposal that you are trying to implement.

David Zalmann Over a year ago

The whole description must fit within a 300*15px div, 1 line max.

razorranjan Over a year ago

are you allowed to show the whole content in a popup? i mean some content can be shown in 300*15px and then whole description can be shown in a popup when clicked on read more button.

Prashant Sharma · Accepted Answer · 2015-09-13 07:42:47Z

0

Try this-

div.test {
        white-space: nowrap; 
        width: 12em; 
        overflow: hidden; 
        height:30px;   
    }
    div.test:hover {
        text-overflow: inherit;
        overflow: visible;
    }

    <p>Hover over the two divs below, to see the entire text.</p>

    <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box. This is some long text that will not fit in the boxThis is some long text that will not fit in the boxThis is some long text that will not fit in the boxThis is some long text that will not fit in the box</div>
    <br>
    <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

answered Sep 13, 2015 at 7:42

Prashant Sharma

3432 gold badges3 silver badges11 bronze badges

1 Comment

David Zalmann Over a year ago

"overflow:visible;" will make it expand all over the rest of the page's design. I'm already using the "text-overflow:ellipsis;" already (I removed un-necessary codes in my original post). There was a reason why I am currently doing "margin-left:-***px;", it's because I can't use "overflow:visible;" ;-D

Collectives™ on Stack Overflow

css variable width div within a fixed width div

5 Answers 5

2 Comments

1 Comment

2 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related