CSS 左对齐浮动但受右边距约束

Question

有没有一种 CSS 方法可以使内联块左对齐，但当容器变小时受右边缘约束，而是让块的左侧对齐减少并尊重文本省略号 ?

当容器很宽时，我想要类似的东西

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

当容器变窄时

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

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

较长的测试和 "My Block" 的文本不是恒定的，它们的宽度也不是恒定的 （因此使用具有固定布局的 table 不会工作，并且常规 table 不允许文本省略号工作）

编辑：插图

edit 2: 粗体表示宽度未知，因此任何涉及 css 且文本或块宽度以像素或百分比表示的解决方案均无效:(

Answer 1

将 display:inline-block 与 text-overflow: ellipsis 结合使用。看看下面的url:

http://jsfiddle.net/jjmxL9hr/

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

Answer 2

使用媒体查询应该可以做到。

.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%;
  }
}

<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>

Answer 3

找到了一个具有灵活布局和 flex-shrink 的解决方案，结果非常简短。它不适用于较旧的 IE 和 Android <= 4.3

可测试的片段：http://jsbin.com/nodironodo/1/edit?html,css,output

下面的代码供参考，没有修饰方面

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

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

.block {
  flex-shrink: 0;
}

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

CSS 左对齐浮动但受右边距约束

CSS left-align a float but constrain by right margin

css

css-float