CSS左对齐一个浮点数，但由右边距约束

Question

有没有一种CSS方法可以让一个内联块保持对齐，但是当容器变得很小时会被右边缘约束，而是减少块左边的内容，并且尊重文本 - 省略号？

当容器很宽时，我需要类似

的东西

Some longish text goes here [My Block]            |<- right edge

当容器很窄时

Some longish...[My Block] |<- right edge

理想情况下当容器调整大小时，它应该是动态且流畅的。

漫长的考验和＆＃34; My Block＆＃34;不是常量，也不是它们的宽度（因此使用具有固定布局的表不起作用，并且常规表不允许文本省略号工作）

编辑插图

编辑2：以粗体显示事实宽度未知，因此任何涉及带有以像素或百分比表示的文本或块宽度的css的解决方案都不起作用：（

Answer 1

将display:inline-block与text-overflow: ellipsis一起使用。看看下面的网址：

http://jsfiddle.net/jjmxL9hr/

我希望这能解决你的澄清。让我知道任何澄清。

Answer 2

使用媒体查询应该这样做。

＆＃13;

＆＃13;

.container{
  overflow: hidden;
  position: relative;
}

.container > p{
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}

.container > div{
  display: inline-block;
  margin-left: 10px;
}

@media screen and (max-width: 480px){
  html .container > p{
    max-width: 60%;
  }
}

＆＃13;

<div class="container">
  <p class="text-primary">Some longish text goes here some longish text goes here</p>
  <div class="my-block">[My Block]</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

找到一种灵活布局和柔性收缩的解决方案，该解决方案非常简短。简单。它不适用于较旧的IE和Android＆lt; = 4.3

可测试摘录：http://jsbin.com/nodironodo/1/edit?html,css,output

以下参考代码，不含化妆品方面

＆＃13;

＆＃13;

.container {
  display: flex;
  white-space: nowrap;
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
}

.block {
  flex-shrink: 0;
}

＆＃13;

<div class="container">
  <div class="ellipsis">Some longish text goes here</div>
  <div class="block">My Block</div>     
</div>

＆＃13;

＆＃13;

＆＃13;