Question

是否可以在容器内部放置2个元素，并排浮动。右边的元素应该动态调整大小以适应内容，左边的元素应该填充容器的剩余空间，并有一个省略号来剪切多余的内容。

---------------------------------------------
|[left element with lots of conte...][right]|
---------------------------------------------

我最接近的是：http://jsfiddle.net/xsr71pak/

但两个表格单元格都使用了50％的表格。我不需要使用表格，但这是我想要的最接近的结果。有人可以帮忙吗？

Answer 1

我希望我能够很好地理解你，这将对你有所帮助：

<style>
.container {
            border: 1px solid black;
            position: relative;
        }
        .info {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .dynamicWidth {
            margin-right: 30px;
        }
        .staticWidth {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            top: 25%; /*centers the content of this div in middle of height*/
        }
#div1 {float:left;}
</style>
    <div class="container">
        <div class="dynamicWidth">
            <div id="div1">Title element</div>
            <div id="div2" class="info">Text: This is a text which should be break with 3 dots when it is bigger then its parent div</div>
        </div>
        <div class="staticWidth">BUT</div>
    </div>

demo of code above

Answer 2

几乎与你拥有的相同，但只使用div而不是表。右侧浮动的将首先出现在HTML中，以使浮动正确排列。

<div class="container">
    <div class="right">Something</div>
    <div class="text-ellipsis">This is really long text, long test, long test, long test, long test, long test long text, long test, long test, long test, long test, long test long text, long test, long test, long test, long test, long test</div>
</div>

小提琴：http://jsfiddle.net/xsr71pak/1/

Answer 3

这样的事情可以解决你的问题：http://jsfiddle.net/ug5k3k15/5/。它确实需要一些javascript，我将在下面解释：

var widthContainer = document.getElementById('container').offsetWidth; 
/* gets the width of the container */

var widthText = document.getElementById('text').offsetWidth; 
/* gets the width of the text */

var widthRest = widthContainer - widthText; 
/* calculates the left-over space. This will result into a number like 500 */

document.getElementById("rest").style.width = widthRest + "px"; 
/* tell the computer what the width of #rest should be. You have to add " + "px" ", else this will just result into a number, and css doesn't understaind numbers.

两个动态尺寸的并排容器，左侧容器上有省略号

3 个答案: