有没有一种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/