Question

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

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

我需要的设计：

我有一个固定宽度的主块（虚线边框）。
主要区域内有2条线，一条在另一条线之上。两条线必须在主块右侧对齐
每行包含2个孩子。左边的是动态文本（灰色背景），右边是选项（蓝色背景）。右上图包含一个固定宽度的图标（橙色），右图一个是动态温度（最多一个十进制）。
块以固定的5px边距分隔。
文字和图标必须垂直居中。
在任何情况下，2条线都需要具有相同的宽度：较小的线条需要宽度较大的线条。
如果一个（或两个）行对于主块变得太大，则左侧文本（灰色背景）会自动换行。

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

我已尝试过的内容：

根据建议here在display: inline-block div上放置一个.left-block，但它不能满足两条线路上相同宽度的需要。
在display: inline-block div上加.content;在其他浏览器上使该行100％宽度，并在firefox上的.left-block内创建一个很大的权利差距。
在white-space: nowrap上使用.left-block;没有帮助。
使.left-block div浮动（向右或向左），但如果文本对于主容器来说太大，则它不起作用

还有很多其他东西，但没有一个兼容所有浏览器（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的解决方案！

我使用display: flex向.content div添加了flex-direction: row-reserve以保持元素的顺序，并且仍然可以将float: right用于IE9。

此外，flex: auto div上有一个.left-block属性可以占用尽可能多的空间（注意：IE11需要 flex-basis 设置为能够计算 flex-grow 属性所需的空间。这就是为什么我在flex属性上使用auto而不是0的原因。See details ）

已完成的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 */
}

Here's the fiddle纠正。有时IE9需要2行文本而不是1行（文本比容器大2px，我不知道为什么......）但至少它是可读的！

Firefox：带有兄弟[float：right]元素+溢出文本

2 个答案: