两个动态大小的并排容器，左侧容器上有省略号答案

【问题标题】：two dynamic sized side-by-side containers with ellipsis on left container两个动态大小的并排容器，左侧容器上有省略号
【发布时间】：2014-08-28 20:43:37
【问题描述】：

容器内是否可以有 2 个元素并排浮动。右侧元素应动态调整大小以完全适合内容，左侧元素应填充容器的剩余空间，并使用省略号删除多余的内容。

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

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

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

【问题讨论】：

你有什么问题？
正如我所说，我所拥有的为每个容器留下了 50% 的宽度。 andi 下面的解决方案正是我想要的。您还会注意到，如果您更改右侧 div 中的内容，它会动态调整宽度以完全适合单词/内容。

标签： html css dynamic ellipsis

【解决方案1】：

几乎和你所拥有的一样，但不是表格，而是使用 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/

【讨论】：

这个成功了！这正是我正在寻找的，也是最简单的解决方案！谢谢安迪！不敢相信我错过了。我首先尝试了 div，但也许首先是正确的 div 会有所作为。

【解决方案2】：

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

<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

【讨论】：

不是我想要的，因为右 div 使用静态宽度（宽度：30px;）。我需要正确的 div 来完全适合内容。在您的示例中，如果我将“staticWidth”div 中的单词更改为大于 30 像素的任何值，它就会中断。

【解决方案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.

【讨论】：

不是我想要的，而且 jsfiddle 似乎也无法正常工作。感谢您的努力。我认为 javascript 在完全可以用 HTML+CSS 完成的事情上是多余的