12

我试图在同一行显示 2 个值，并赋予右侧优先级以增长（它是一个移动应用程序，需要检测屏幕的宽度并“挤压”左侧单元格以使其更小。

这是我的尝试：http: //jsfiddle.net/rodneyjoyce/TxBhD/

HTML

<div id="screen">
    <div id="leftDesc">This is a Long Description</div>
    <div id="rightDesc">1000</div>
</div>

CSS

#screen
{    
    width: 200px;
}

#leftDesc
{    
    display: inline-block;
    overflow: hidden;
    float: left;
    height: 20px;
    max-width:160px;
    color: blue;
}

#rightDesc
{   
    float: right;
    display: inline-block;
    text-align: right;
    color: red;
}

应该发生什么：将“1000”增加到“1000 000”。蓝色文本应切断“描述”一词的末尾，红色和蓝色文本应保持在同一行。

免责声明：我不太擅长 CSS - 在 XAML 中，我在宽度上使用 * 值，以便单元格自动增长并缩小其他单元格。

我不想使用 Javascript 或 JQuery。

4

2 回答 2

7

我不确定您是否可以根据内容使用 CSS 动态更改浮动元素的大小，但部分问题可以通过以下方式解决：

添加到#leftDesc：

text-overflow:ellipsis;
white-space:nowrap;

该white-space属性将文本保持在一行；text-overflow应该是不言自明的。

JSFiddle

于 2013-06-24T02:09:17.640 回答
4

使用灵活的盒子布局：

#screen
{    
    width: 200px;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

#leftDesc
{    
    overflow: hidden;
    height: 20px;
    color: blue;
    white-space:nowrap;
}

#rightDesc
{   
    text-align: right;
    color: red;
}

我已经删除了你float的 s 和你inline-block的 s，并添加display: flex了让盒子正常工作。

我还添加white-space:nowrap;了以确保描述被切断，就像你问的那样。

我也删除了max-width:160px;，因为它在这种情况下似乎没有任何影响。

请记住，这在 IE 中不起作用。

于 2013-06-24T02:47:24.523 回答