Html css固定宽度div中的可变宽度div

上下文：（简化）

我的网站是完全非js和非常轻量级的，我不想使用js。我在网上发现了很多使用js的解决方案，我已经知道了。请尊重这一点。我很想通过纯css解决这个问题。

(二)

说明

贬值了

想法：
我在考虑用PHP代码“欺骗”它。例如，我会计算描述的长度，以便相应地设置“左边距：-？？？px；”。现在对我来说，这听起来甚至比js更难看，迫使我绕过conveniant css样式表在php文件中“硬编码”它，并导致一个沉重的php文件。不相关。
我没有在CSS3中找到任何关于它的信息，尽管很多其他设计师都是从我在GG上的搜索中找到的。是否超出了css语言的范围？
多谢各位

注：我的描述必须符合一行。无换行、无滚动条、无“显示更多”按钮等

当达到某个长度时，可以将echo

与php一起使用 每一次

您可以使用css

max width

属性将宽度限制为 一定数量

---

这就是您要找的吗？

我建议您确定description div的宽度和高度，并使用css属性overflow-y:auto

默认的滚动条对于所有浏览器来说都是丑陋和不同的，所以你可以尝试一个js插件，但正如你所说的，你不想仅仅为了完成一个小任务而添加一个库。：）

试试这个-

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>

div.test{
空白：nowrap；
宽度：12em；
溢出：隐藏；
高度：30px；
}
分区测试：悬停{
文本溢出：继承；
溢出：可见；
}
将鼠标悬停在下面的两个div上，以查看整个文本

这是一些长文本，无法放入框中。这是一些无法放入框中的长文本这是一些无法放入框中的长文本这是一些无法放入框中的长文本这是一些无法放入框中的长文本


这是一些长文本，无法放入框中

我能来的最近的地方

我有点担心

幻灯片

最终会以隐藏的描述结束，但我认为这是一个很小的代价……否则我认为它符合大多数标准

*{
保证金：0；
填充：0；
框大小：边框框；
}
.包裹{
宽度：300px；
保证金：1em自动；
边框：1px纯绿色；
显示器：flex；
弯曲方向：立柱；
}
.包裹img{
最大高度：100%；
宽度：自动；
}
.描述{
宽度：300px；
高度：15px；
空白：nowrap；
溢出：隐藏；
字体大小：13px；
线高：15px；
位置：相对位置；
}
.wrap.desc p{
位置：绝对位置；
变换：translateX（0）；
转变：转变；
}
.wrap:hover.desc p{
转化：translateX（-100%）；
}

三尖柄火鸡夹头，波切塔鸡腿和多伊尔牛肋，意大利熏香肠意大利腊肠牛肉。火腿肉、猪肚皮、熏牛肉

我的描述必须放在一行中。因此，请清点内容。使字体变小。不。我的描述必须符合一行。感谢您的尝试。使用纯JS，您的网站仍将是轻量级的。您是否考虑过如何在移动设备上使用touch？此问题已由amazon/trip advisor等在评论中解决-查看他们是如何做到的。请注意，他们如何使用底部的渐变来提供视觉线索，显示隐藏的内容更多。请允许我坚持：我的描述必须符合一行。我不想要像切换开/关链接这样的“显示更多”的技巧。是的，我考虑过触摸屏设备：它们不会显示描述。正如我所说，我在这些特定div中的描述空间非常有限。基本上，整个描述必须适合一个300*15px的分区。那么，您是为一个平台/浏览器/机器设计的吗？我强烈建议您进行一些用户测试，看看您的设计是否有效。如果你还没有发现，克鲁格的火箭手术书是一个很好的开始。这并没有导致我想要实现的目标。我在描述部分的空间很短。我既不想要线刹车，也不想要滚动条：（你能告诉我你正试图实施的确切方案吗？整个描述必须在300*15px div内，最多1行。你可以在弹出窗口中显示整个内容吗？我的意思是，一些内容可以在300*15px中显示，然后单击“阅读更多”按钮时，整个描述可以在弹出窗口中显示。“溢出：可见；”我已经在使用“文本溢出：省略号”了（我在我的原始帖子中删除了不必要的代码）。我现在之所以使用“左边距：-***px；”，是因为我不能使用“溢出：可见”-d这显然是我们使用css所能得到的最接近的结果。谢谢你的“display:flex；”，我从来没有听说过。我很好，没有flexbox就可以完成布局…任何正常的方法都可以工作…这些天我只是默认使用flexbox。：）

Javascript/jQuery

<marquee>description</marquee>

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

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>