Question

我有这个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;
}

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

预期：

姓名：

家庭：＆＃34;嘿＆＃34;

实际值：

姓名：＆＃34;嘿＆＃34;

家庭：

Answer 1

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

来自文档：

Flex项目注意事项

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

- MDN Documentation - Using CSS flexible boxes

您的问题可以通过在您的范围内添加不间断空格来解决。

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

空间跨度在CSS3 Flexbox中消失

1 个答案:

Flex项目注意事项