Firefox:带有同级[foat:right]元素的自动换行+溢出文本

Question

我在一个真正特定的图形实现上遇到了Firefox的问题。

我想你可以通过测试这个fiddle来理解这个问题：在firefox上你会看到这个问题，在任何其他浏览器上你都会看到预期的结果(包括IE9)。

我需要的设计：

PNG插图

• 我有一个固定宽度的主块(虚线边框)
• 主区块内有两条线路，一条在另一条之上。这两条线必须在主块的右侧对齐
• 每行包含2个子项。左边的是动态文本(灰色背景)，右边的是可选文本(蓝色背景)。右上方的图标包含一个固定宽度的图标(橙色)，右下方的图标是一个动态温度(最大小数点为一)
• 区块之间有固定的5倍边距
• 文本和图标必须垂直居中
• 在任何情况下，这两条线都需要有相同的宽度：较小的线取较大的线的宽度
• 如果一行(或两行)对于主块来说太大，则左侧文本(灰色背景)会自动换行

HTML代码：

<div class="main-wrapper">
<div class="container">
<div class="content upper">
<div class="right-block"><!-- This block is optionnal -->
<div class="icon"></div>
</div>
<div class="left-block">
<div class="vertically-centered">
<p>
Some dynamic text
</p>
</div>
</div>
</div>
<div class="content lower">
<div class="right-block"><!-- This block is optionnal -->
<div class="vertically-centered">
<span>
21,5°
</span>
</div>
</div>
<div class="left-block">
<div class="vertically-centered">
<p>
Some other dynamic text
</p>
</div>
</div>
</div>
</div>
</div>

CSS代码：

/* utilities */
.vertically-centered {
display: table;
height: 100%;
width: 100%;
}
.vertically-centered > * {
display: table-cell;
vertical-align: middle;
}
/* custom styles */
.container {
display: inline-block;
float: right;
max-width: 100%;
}
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
}
.right-block, .left-block {
height: 100%;
}
.right-block {
float: right;
font-size: 42px;
margin-left: 5px;
background-color: lightblue;
}
.left-block {
font-size: 25px;
line-height: 25px;
overflow: hidden;
padding: 0 20px;
text-align: left;
background-color: lightgray;
}
.upper .right-block {
width: 85px;
}
.lower .right-block {
padding: 0 15px;
}
.icon {
position: relative;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
background-color: orange;
}

我已经尝试过的：

• 将display: inline-block放在.left-blockdiv上，如这里所建议的，但它不能满足两行宽度相同的需要
• 在.contentdiv上放置一个display: inline-block；在其他浏览器上使行的宽度为100%，并在firefox上的.left-block中创建一个大的右侧间隙
• 在.left-block上使用white-space: nowrap；没有帮助
• 使.left-blockdiv浮动(右侧或左侧)，但如果文本对于主容器来说太大，则不起作用

还有很多其他东西，但没有一个能兼容所有浏览器(Chrome、Firefox、Safari、IE9+、Edge)。。。

虽然我认为它不会改变任何事情，但它是响应性的。

我正在试用flexbox，但是。。。IE9…如果有人有建议的话。

Answer 1

您可以使用CSS word-break属性来允许在长单词中间换行：

.content {
width: 100%;
margin: 5px 0px;
height: 85px;
word-break: break-all;
}

Answer 2

我找到了一个使用flexbox的解决方案！

我用flex-direction: row-reserve在.contentdiv中添加了一个display: flex，以保持元素的顺序，并且仍然可以将float: right用于IE9。

此外，.left-blockdiv上有一个flex: auto属性，可以占用尽可能多的空间(注意：IE11需要设置flex-basis，以便能够计算flex-grow属性所需的空间。这就是为什么我在flex属性上使用auto而不是0。请参阅详细信息)

已完成的CSS代码

.content {
width: 100%;
margin: 5px 0px;
height: 85px;
display: flex; /* Initialize flexbox */
flex-direction: row-reverse; /* keep the order of the element */
border: 1px dashed gray;
}
.left-block {
font-size: 25px;
line-height: 25px;
overflow: hidden;
padding: 0 20px;
text-align: left;
background-color: lightgray;
flex: auto; /* the text blocks take all the available space */
}

这是修正的小提琴。有时IE9需要2行文本而不是1行(文本比容器大2倍，我不知道为什么…)，但至少它是可读的！