如何使"文本溢出:省略号"在浮动div上工作？

Question

我有两个按钮浮动到屏幕的两侧,如果屏幕缩小,我希望它们可以很好地折叠.在视觉上,这就是我想要的:

________________________________________________________________
|                                                               |
|   |LongTextButtonName|                 |LongTextButtonName|   | When the screen
|_______________________________________________________________| is large

_______________________________________
|                                      |
|   |LongTextBu...|  |LongTextBu...|   | When the screen is small
|______________________________________|

不幸的是,现在我明白了:

________________________________________
|                                       |
|   |LongTextButtonName|                |
|                |LongTextButtonName|   | 
|_______________________________________|

我想要一个仅限CSS的解决方案.

这是我目前的html和css(这里是小提琴):

<div class="button-container">
  <div class="left-button"><a>LongTextButtonName</a></div>
  <div class="right-button"><a>LongTextButtonName</a></div>
</div>

.button-container {
  min-width:320px;
}
.button-container > div {
  border: 1px solid gray;
  background-color: orange;
  min-width: 160px;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.left-button {
  float: left;
}
.right-button {
  float: right;
}

Answer 1

下面的小提琴基于以下内容:

• 容器需要宽度以触发溢出和省略号.
• 为了让盒子不断折叠,我使用了一个百分比宽度.
• 考虑到我使用CSS3的填充 box-sizing:border-box;

请注意,由于box-sizing:border-box;此原因,此解决方案不适用于旧版浏览器.

.button-container {
  min-width:320px;
}
.button-container > div {
  border: 1px solid gray;
  background-color: orange;
  max-width: 50%;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing:border-box;
  text-overflow: ellipsis;
}
.left-button {
  float: left;
}
.right-button {
  float: right;
}

http://jsfiddle.net/UfxgZ/1/