有没有一种CSS方法可以使内联代码块保持左对齐,但是当容器变小时,它会受到右边缘的约束,而是要缩小代码块左侧的内容,并遵守文本省略号?

当容器宽时,我想要类似

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


当容器狭窄时

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


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

冗长的测试和“ My Block”的文本不是恒定的,宽度也不是恒定的(因此,使用具有固定布局的表不起作用,而常规表则不允许文本省略号起作用)

编辑:插图



编辑2:粗体显示事实宽度是未知的,因此任何涉及以像素或百分比表示文本或块宽度的css的解决方案均不起作用:(

最佳答案

使用媒体查询应该做到这一点。



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

关于css - CSS左对齐浮点数,但受右边界约束,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28873451/

10-12 01:12
查看更多