html - 带有 flexbox 和溢出的标签的纯 CSS 向导：省略号仅在 iPhone 上溢出

问题描述

我正在尝试使用此处所述的 checkbox-hack 构建一个仅 css（无 javascript）的多步骤向导。该功能按预期工作。到目前为止，一切都很好。但是，我在标签的格式上苦苦挣扎。我想要的是：

所有标签的宽度都应该相等，除了选中的标签，它应该明显更宽（flex-grow 3）。
标签应包含 svg（带数字的圆圈）和作为文本的标签描述，垂直居中。
标签文本应为溢出省略号
选中标签的标签文本应始终完全可见（没问题，因为选中的标签更宽）

我在结合 flexbox 时遇到了一些关于文本溢出的问题，但是这个链接让我走上了正确的轨道。在我的 macbook 上，一切似乎都可以在 Firefox、Chrome 和 Safari 中运行，但在我的 iPhone 上，向导总是强制布局更宽且超出屏幕。如果我只有标签中的文本，那么在 iPhone 上一切正常。但是使用 svg 和文本，布局会中断。

这是一个私人项目，我根本不需要支持 IE。但主要目的是在iPhone和iPad上运行它，因此它真的让我很恼火，它可以在其他任何地方运行。

我想获得有关以下方面的帮助：

垂直文本对齐标签文本
使这种布局在 iPhone 上工作

请在下面检查我的代码。先感谢您。

html {
  color: #5f5f5f;
  height: 100%;
  font-family: sans-serif;
}

body {
  height: 100%;
  min-width: 320px;
}

.wizard figure {
  display: block;
}

.wizard>input,
.wizard figure>div {
  display: none;
}

#step1:checked~figure .step1,
#step2:checked~figure .step2,
#step3:checked~figure .step3,
#step4:checked~figure .step4 {
  display: block;
}

.wizard-menu {
  display: flex;
  flex-wrap: nowrap;
}

.menu-item-wrapper {
  display: block;
}

.menu-item {
  min-width: 0;
  flex: 1 1 0;
  cursor: pointer;
  color: #5f5f5f;
  background-color: #f2f2f2;
  padding: 5px;
  margin-right: 2px;
  height: 26px;
}

.menu-item:last-child {
  margin: 0;
}

.menu-item>span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu-item-number {
  width: 26px;
}

.menu-item-number circle {
  fill: #5f5f5f;
}

.menu-item-number text {
  fill: #FFFFFF;
  text-anchor: middle;
  dominant-baseline: middle;
}

#step1:checked~nav label[for="step1"],
#step2:checked~nav label[for="step2"],
#step3:checked~nav label[for="step3"],
#step4:checked~nav label[for="step4"] {
  flex-grow: 3;
  color: #FFFFFF;
  background-color: #A3C06C;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta charset="utf-8">
  <title>Example</title>
</head>

<body>
</body>
<main class="content">

  <form class="wizard">

    <input checked="checked" id="step1" type="radio" name="steps" />
    <input id="step2" type="radio" name="steps" />
    <input id="step3" type="radio" name="steps" />
    <input id="step4" type="radio" name="steps" />

    <nav class="wizard-menu">
      <label class="menu-item" for="step1">
                <span class="menu-item-wrapper">
                    <svg class="menu-item-number" viewBox="0 0 100 100"
                         xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="50"/>
                        <text x="50" y="50" font-size="50">1</text>
                    </svg>
                    <span class="menu-item-text">Label Text 1</span>
                </span>
        </label>

      <label class="menu-item" for="step2">
                <span class="menu-item-wrapper">
                    <svg class="menu-item-number" viewBox="0 0 100 100"
                         xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="50"/>
                        <text x="50" y="50" font-size="50">2</text>
                    </svg>
                    <span class="menu-item-text">Label Text 2</span>
                </span>
        </label>

      <label class="menu-item" for="step3">
                <span class="menu-item-wrapper">
                    <svg class="menu-item-number" viewBox="0 0 100 100"
                         xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="50"/>
                        <text x="50" y="50" font-size="50">3</text>
                    </svg>
                    <span class="menu-item-text">Label Text 3</span>
                </span>
        </label>

      <label class="menu-item" for="step4">
                <span class="menu-item-wrapper">
                    <svg class="menu-item-number" viewBox="0 0 100 100"
                         xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="50"/>
                        <text x="50" y="50" font-size="50">4</text>
                    </svg>
                    <span class="menu-item-text">Label Text 4</span>
                </span>
        </label>
    </nav>

    <figure>
      <div class="step1"> Content of step1</div>
      <div class="step2"> Content of step2</div>
      <div class="step3"> Content of step3</div>
      <div class="step4"> Content of step4</div>
    </figure>

  </form>
</main>

</html>

标签： htmlcssflexboxresponsive-designcss-grid

html - 带有 flexbox 和溢出的标签的纯 CSS 向导：省略号仅在 iPhone 上溢出

问题描述

解决方案

推荐阅读