Question

我在使两个内联文本元素以特定方式运行时遇到了一个有趣的挑战。这是我的参数：

左侧的主要文字的宽度会有所不同，约为父宽度的30-60％。
右侧的补充文字将在父宽度的20-120％之间大幅变化。
父宽度是响应性的，可以缩小到其全宽的75％。绝对定位不行。
每当两个项目都不合适时，我希望 MAIN TEXT 保持完全可见（无省略号）和补充文本以隐藏溢出：
- 溢出：隐藏
- text-overflow：省略号

CSS和HTML都可以完全修改，但我更喜欢HTML仍然是语义的。如果有一个很好的方法，请随意使用JS / jQuery。

.outer {
    width: 200px;
    background-color: skyblue;
    border: 3px solid skyblue;
    display: flex;
    justify-content: space-between;
}
.left {
    background-color: salmon;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.right {
    background-color: blanchedalmond;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="outer">
    <div class="left">
        MAIN TEXT
    </div>
    <div class="right">
        additional info sdjkfhsdf 
    </div>
</div>

Answer 1

我改变了你的CSS。这是一个fiddle

for .left我添加了float和max-width（当你看到它高达容器的60％时）我删除了溢出：隐藏因为你完全想要它。

.left {
 background-color: salmon;
 white-space: nowrap;
 max-width: 60%;
 float: left;
}

我从.outter中删除了display：flex。我认为这就是你想要的。

Answer 2

.outer {
    width: 200px;
    background-color: skyblue;
    border: 3px solid skyblue;
    overflow:hidden;
}
.left {
    float:left;
    background-color: salmon;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.right {
    background-color: blanchedalmond;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

What I have:
<div class="outer">
    <div class="left">
        MSGDFGDFGDFDFGDFGDFGDFG
    </div>
    <div class="right">
        adfhdfgh
    </div>
</div>

http://jsfiddle.net/gksfwozz/2/

来自此链接How to get these two divs side-by-side?

内联div：收缩包装，另一方面隐藏溢出

2 个答案: