Html 动态宽度元素上的文本溢出省略号

Text overflow ellipsis on dynamic width element

提问by Hughes

I'm having some issues trying to get text-overflow: ellipsisto work on an element with a dynamic width. I've looked into other solutions but all of them seem to use some form of static width, where as I'm hoping to achieve an entirely dynamic solution. Javascript IS an option, but would prefer to keep it to CSS if possible. I also have the constraint of any solution being IE8 compatible. Below is what I have so far.

我在尝试text-overflow: ellipsis处理具有动态宽度的元素时遇到了一些问题。我研究了其他解决方案，但似乎所有解决方案都使用某种形式的静态宽度，因为我希望实现完全动态的解决方案。Javascript 是一种选择，但如果可能，更愿意将其保留为 CSS。我也有任何与 IE8 兼容的解决方案的限制。以下是我到目前为止所拥有的。

The HTML:

HTML：

<div class="container">
    <div class="col-1 cell">
        <h1>Title</h1>
    </div>
    <div class="col-2 cell">
        <nav>
            <ul>
                <li><a href="#">Main #1</a></li>
                <li><a href="#">Main #2</a></li>
                <li><a href="#">Main #3</a></li>
                <li><a href="#">Main #4</a></li>
                <li><a href="#">Main #5</a></li>
            </ul>
        </nav>
    </div>
    <div class="col-3 cell">
        <div class="foo">
            <img src="http://placehold.it/50x50" alt="">
        </div>
        <div class="bar">
            Some overly long title that should be ellipsis
        </div>
        <div class="baz">
            v
        </div>
    </div>
</div>

The SCSS:

SCSS：

.container {
    border: 1px solid #ccc;
    display: table;
    padding: 30px 15px;
    table-layout: fixed;
    width: 100%;
}

.cell {
    display: table-cell;
    vertical-align: middle;
}

.col-1 {
    width: 25%;

    h1 {
        margin: 0;
        padding: 0;
    }
}

.col-2 {
    width: 50%;

    ul {
        margin: 0;
        padding: 0;
    }

    li {
        float: left;
        list-style: none;
        margin-right: 10px;
    }
}

.col-3 {
    width: 25%;

    .foo {
        float: left;

        img {
            display: block;
            margin: 0;
            padding: 0;
        }
    }

    .bar {
        float: left;
        height: 50px;
        line-height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .baz {
        background: #ccc;
        float: left;
        height: 50px;
        line-height: 50px;
        padding: 0 5px;
    }
}

Ideally I would like the element with the class of .barto take up the remaining width of .col-3. Any nudge in the right direction would be greatly appreciated. Here a link to a JSFiddleas well. Thanks!

理想情况下，我希望类为 的元素.bar占用.col-3. 任何朝着正确方向的推动将不胜感激。这里还有一个指向JSFiddle的链接。谢谢！

回答by Josh Burgess

Just add max-width: 100%to the element in order to achieve what you're after. The reason that you need some kind of width set is that the element will continue to expand until you tell it that it can't.

只需添加max-width: 100%到元素即可实现您的目标。您需要某种宽度集的原因是元素将继续扩展，直到您告诉它不能。

Here's a JSFiddle Example.

这是一个JSFiddle 示例。

.bar {
    float: left;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* new css */
    max-width: 100%;
}

Edit – Flexbox edition

编辑 – Flexbox 版

So, here's a flexbox display. You're going to need to shim for IE8 using a library like this: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie

所以，这是一个 flexbox 显示。您将需要使用这样的库为 IE8 填充垫片：https: //github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie

Here's the fix for browsers that don't suck:

这是针对不烂的浏览器的修复：

SCSS Update

SCSS 更新

.container {
    border: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    padding: 30px 15px;
    width: 100%;
}
.cell {
    flex: 1 1 33%;
    vertical-align: middle;
}
.col-3 {
    width: 25%;
    display: flex;
    flex-direction: row;

    .foo {
        flex: 0 1 auto;

        img {
            display: block;
            margin: 0;
            padding: 0;
        }
    }

    .bar {
        height: 50px;
        line-height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1 2 auto;
    }

    .baz {
        background: #ccc;
        height: 50px;
        line-height: 50px;
        padding: 0 5px;
        flex: 1 1 auto;
    }
}

JSFiddle Example

JSFiddle 示例