带有文字溢出省略号的流体宽度 [英] Fluid width with text-overflow ellipsis

问题描述

我正在尝试使用溢出宽度和 ... 使内部div溢出（使用省略号） 。

I'm trying to make inner div with fluid width and ... when overflow (using ellipsis).

要求：

1. .container 已固定已知宽度 200px


2. .badge 可以是任何宽度，但最大为 30px 。这是因为此div包含一个数字（从0到999）。此位置必须保持在右（向右浮动）上。


3. .content 和。徽章必须在同一行


4. .content 将带有省略号和nowrap 。必须保持在左


5. 关键提示： .content 宽度= 。容器的宽度-。徽章的宽度

1. .container has fixed known width 200px
2. .badge could be any width but max is 30px. This is because this div contains a number (from 0 to 999). This must stay right (float right).
3. .content and .badge must be in same line
4. .content will have ellipsis and nowrap. Must stay left
5. Key important: .content's width = .container's width - .badge's width

我无法获得上述的＃5 。

下面的代码使 .badge 包装在第二行或 .content 只是不会扩大其宽度。

My code below either made the .badge to wrap in second line or the .content just doesn't expand its width.

HTML ：

<div class=container>
    <div class=content>
        Donec id elit non mi porta gravida at eget metus
    </div>
    <div class=badge>
        5
    </div>
</div>

CSS ：

.container {
    width: 200px;
    background: gray;
}

.content {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 170px;
    background: green;
}

.badge {
    display: inline-block;
    max-width: 30px;
    background: yellow;
    float: right;
}

链接： http://jsfiddle.net/qhoc/4w6wR/1/

推荐答案

尝试一下：

<div class=container>
    <div class=badge>
        5
    </div>
    <div class=content>
        Donec id elit non mi porta gravida at eget metus
    </div>    
</div>

.container {
    width: 200px;
    background: gray;
}

.content {    
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;    
    background: green;
}

.badge {
    float:right;
    max-width: 30px;
    background: yellow;    
}

这篇关于带有文字溢出省略号的流体宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！