固定宽度div内的css可变宽度div

Question

上下文：（简化）

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

问题：
有时描述可能会很长并被删减（预期，请参阅“溢出：隐藏；”）。 所以我这样做是为了当用户将描述悬停时，css动画将描述推向左侧一点，让我们说“margin-left:-200px;”。 通过这种方式，用户可以继续阅读描述，同时显示自身（css 动画）。
现在问题来了：描述可以从很长到很长到很长不等。 显然将它向左推 -200px 有时是不够的，有时是太多。

我知道的解决方案：
1)

Javascript/jQuery

我的网站完全非 js 并且非常轻量级，我不想使用 js。 我在网上找到了很多使用js的解决方案，我已经知道了。 请尊重这一点。 我很想通过纯 css 来解决它。

2)

<marquee>description</marquee>

折旧。

想法：
我正在考虑使用 PHP 代码“欺骗”它。 例如，我会计算描述的长度，以便我可以设置“margin-left:-???px;” 因此。 现在这对我来说听起来比 js 更丑陋，迫使我在 php 文件中“硬编码”它，绕过方便的 css 样式表并导致 php 文件很重。 无关。
我在 CSS3 中没有找到任何关于它的内容，尽管许多其他设计师从我在 GG 上搜索到的内容都遇到了这个问题。 它是否超出了 css 语言的范围？
谢谢你。

PS：我的描述必须适合1 行。 没有换行符，没有滚动条，没有“显示更多”按钮等。

Answer 1

1. 当每次达到一定长度时，您可以将 echo <br/>与 php 一起使用。
2. 您可以使用 css max-width属性将宽度限制为一定数量

Answer 2

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

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

这是你要找的吗？

Answer 3

我建议您修复描述 div 的宽度和高度并使用 css 属性溢出-y:auto。

默认滚动条对于所有浏览器来说都是丑陋且不同的，因此您可以尝试使用 js 插件，但正如您所说，您不想为了完成一项小任务而添加库。:)

Answer 4

尝试这个-

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>

Answer 5

最接近我能来的。

我有点担心slide最终会隐藏描述，但我认为这是一个很小的代价......否则我认为它符合大多数标准

 * { 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-qc-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>

代码笔演示