Javascript 将元素添加到非包装容器中，左侧溢出

我需要使用JS将元素添加到容器中。当内部元素的总宽度大于包装的宽度

DIV

时，最左侧的元素应消失在左侧

我想我可以通过使用

p {
    border: 1px solid red;
    display: inline-block;
    float: left;
    margin: 1px;
    padding: 0;
    white-space: nowrap;
}

但它不起作用，因为元素浮动到下一行

小提琴：

谢谢你的建议

这是你的答案

CSS的更改：

.container{display:table;}

希望这能帮上忙。

那怎么办

您需要使用具有固定宽度/高度和溢出的元素包装容器：隐藏：

width: 200px;
height: 23px;
overflow: hidden;
position: relative;

一旦容器的宽度大于包装的宽度，将容器与包装的右侧对齐（通过JS）：

---

对我来说，这不起作用-container DIV变得更高，内部元素被包装。。。

position: absolute;
right: 0px;