Question

面对野生动物园中的简单错误，猜猜我不是第一个，但没有找到任何类似的问题。

简单案例：标题，其中包含带文字和长标题的按钮

.one {
  display: flex;
  position: fixed;
  width: 100%;
  height: 60px;
  line-height: 60px;
  left: 0;
  top:0;
  justify-content: space-between;
}

.back {
  white-space: nowrap;
  color: #f00;
}

.text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

<div class="one">
    <span class="back">Back</span>
    <p class="text">asd asda sda sd asd asda sda sdasd asda sda sdasd asda sda sdasd asda sda sdasd asda sda sdasd asda sda sdasd asda sda sdasd asda sda sdasd asda sda sdasd asda sda sdasd asda sda sd</p>
  </div>

它在Chrome浏览器和ff中运行良好，但在safari中被破坏（按钮折叠）现在我解决它只是删除文本并仅显示手机的静态大小图标，但如果我想将其用于文本，那么正确的解决方案。

为min-width: 0设置.text没有帮助;设置按钮的最小/最大宽度我也做不到，因为我不知道文本会有多长（在不同的部分和语言中）

Flexbox在Safari中折叠文本

0 个答案: