CSS3 Flexbox 中的空跨度消失答案

【问题标题】：Empty Span Disappears in CSS3 FlexboxesCSS3 Flexbox 中的空跨度消失
【发布时间】：2016-02-15 06:31:07
【问题描述】：

我有这个 html：

<div class="panel panel-info">
        <div class="panel-heading">Person</div>
        <div class="panel-body">
          <div class="data">
            <p class="keys">
              <label>Name: </label>
              <label>Family: </label>
            </p>
            <p>
              <span ng-bind="name"></span>
              <span ng-bind="family"></span>
            </p>
          </div>
        </div>
      </div>

.data {
    display: flex;
}
.keys, .values {
    display: flex;
    flex-direction: column;
    margin: 0;
}

由于某种原因，空跨度表现为无显示。我希望它只是空的空间。第一次发生在我身上！

预期：

姓名：

家人：“嘿”

实际：

名字：“嘿”

家庭：

【问题讨论】：

对不起，你的问题，你能解释清楚一点吗..
另外，如果你想声明一个类型，使用 id="..."，它只会被使用一次。
<span> 是一个内联元素。如果 CSS 为空，则 CSS 中的任何内容都不会占用任何空间。
我试过显示块。它不起作用。
您的问题已在this DEMO on JSFiddle 中得到验证。

标签： html angularjs css flexbox

【解决方案1】：

您的问题已在this DEMO on JSFiddle 中得到验证。

来自文档：

弹性项目注意事项

直接包含在弹性容器中的文本会自动包装在匿名弹性项目中。但是，不会渲染仅包含空格的匿名弹性项目，就好像它被指定为 display: none。

-- MDN Documentation - Using CSS flexible boxes

您的问题可以通过在您的跨度中添加一个不间断空格来解决。

    <p class="values">
      <span ng-bind="name+'&nbsp'"></span>
      <span ng-bind="family">vvv</span>
    </p>

【讨论】：