html - Firefox:带有兄弟 [float: right] 元素的自动换行符 + 溢出文本

Question

我在使用 Firefox 时遇到了一个非常具体的图形实现问题。

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

我需要的设计:

PNG illustration

• 我有一个固定宽度的主 block (虚线边框)。
• 在主 block 内有 2 条线，一条在另一条线上。两条线必须在主 block 的右侧对齐
• 每行包含 2 个 child 。左边的是动态文本(灰色背景)，右边的是可选的(蓝色背景)。右上角包含固定宽度的图标(橙色)，右下角是动态温度(最大保留一位小数)。
• block 由固定的 5 像素边距分隔。
• 文本和图标必须垂直居中。
• 无论如何，这两条线的宽度必须相同:较小的线与较大线的宽度相同。
• 如果一行(或两行)对于主 block 而言太大，左侧文本(灰色背景)会自动换行。

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-block div 上here , 但它不能满足两行宽度相同的需要。
• 在.content div 上放置一个display: inline-block；在其他浏览器上使线条宽度为 100%，并在 firefox 上的 .left-block 中创建一个大的右侧间隙。
• 在 .left-block 上使用 white-space: nowrap；没有帮助。
• 使 .left-block div float (向右或向左)，但如果文本对于主容器而言太大则不起作用

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

虽然我不认为它会改变任何东西，但它是一种精确:它是响应式的。

我正在尝试使用 flexbox 但... IE9... 如果有人有建议。

Answer 1

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

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