Html 两个div元素并排出现文本溢出

我这样做是为了展示一些接近我目前拥有的东西

我要找的是一行的左div上的省略号，它位于右div的旁边，这样它就不会重叠。我意识到这个位置在这里可能不起作用。两者都有动态文本。如有必要，我愿意更改上述内容

编辑：我需要第一行的第一部分仅在一行上，当它与第二部分重叠时溢出。到目前为止，答案还没有提供这样做的手段。如果div的内容是静态的，我会设置静态宽度。我可能可以为第二个div设置一个静态宽度，因为其中内容的可能性有限

注意：列宽的大小会根据浏览器尺寸变化。此外，由于页面上存在其他容器/元素，因此它绝对处于位置。可能不太理想

另一个注意事项：该列可能有许多行，因此我仅显示其中的几行作为示例

下面是一些示例代码：

上校{ 背景颜色：粉红色； 位置：绝对位置； 排名：0； 左：0； 底部：0； 宽度：400px； } .行{ 背景色：9595E4； 边框底部：1px纯黑； 填充：3px8px； } p{ 保证金：0； 填充：0； } .第一排{ 位置：相对位置； 高度：19px； 线高：19px； } .第一排，第一排{ 位置：绝对位置； 排名：0； 右：0； 底部：0； 左：0； 宽度：自动； 高度：自动； 空白：nowrap； 文本溢出：省略号； 溢出：隐藏； 字体大小：粗体； } 第一排，第二排{ 位置：绝对位置； 排名：0； 右：0； 底部：0； 左：自动； 宽度：自动； 高度：自动； 字号：0.8em； 颜色：ccc； } 这是第一行，第一部分，重叠 第一行，第二部分 这是第二行

这个内容可能非常长 第一行，第二部分 这是第二行

或者它可能很短 第一行，第二部分 这是第二行

使用css的解决方案：

---

jquery插件的解决方案：

您正在声明一列&其中有两行，这在技术上是错误的。相反，您应该声明一行并创建任意多的列，在本例中，只有两行，因为您只希望左元素和右元素并排放置。最近，我回答了一个类似这样的场景，我能够用它实现我所需要的

代码如下：

上校{ 背景颜色：粉红色； 位置：绝对位置； 排名：0； 左：0； 底部：0； 宽度：400px； } .行{ 背景色：9595E4； 边框底部：1px纯黑； 填充：3px8px； } p{ 保证金：0； 填充：0； } .第一排{ 位置：相对位置； 高度：19px； 线高：19px； } .第一排，第一排{ 位置：绝对位置； 排名：0； 右：125px； 底部：0； 左：0； 宽度：自动； 高度：自动； 空白：nowrap； 文本溢出：省略号； 溢出：隐藏； 字体大小：粗体； } 第一排，第二排{ 位置：绝对位置； 排名：0； 右：0； 底部：0； 左：自动； 宽度：自动； 高度：自动； 字号：0.8em； 颜色：ccc； 最大宽度：125px； } 这是第一行，第一部分，重叠 第一行，第二部分 这是第二行

这是第一行，第一部分，重叠 第一行，第二部分 这是第二行

---

@文森特·威尔基：是的。但是每行有一个元素，这在本例中不是必需的。对吗？如果只有一行很简单，请将此示例类添加到所有不希望重叠的元素：。truncate{width:250px；空格：nowrap；溢出：hidden；文本溢出：省略号；}