css variable width div within a fixed width div - html

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.

Answer 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

Answer 2

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap
p.test {
word-wrap: break-word;
}
Is this what you're looking for?

Answer 3

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

Answer 4

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

Answer 5

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>