css - 如何用CSS证明填充固定宽度父项中的短文本？

Question

这是我的目标

尝试添加文本对齐

但是好像文字不够长。

如何让短文本填满父级的宽度？

Answer 1

似乎 text-align 只适用于超出行的文本。你可以使用 flexbox 来解决这个问题。尽管它需要您将每个单词都包装在一个跨度中。不确定你打算在哪里使用它，但如果它只在一个区域，有 6 个单词，它可能适合你。

<div class="parent">
  <p><span>bla</span> <span>bla</span> <span>bla</span></p>
</div>


//Mixins
@mixin flexbox($direction, $wrap, $justify, $align){
    display: flex;
    flex-direction: $direction;
    flex-wrap: $wrap;
    justify-content: $justify;
    align-items: $align;
}

.parent{
  width: 100%;
  background: #eee;
  margin-top: 20px;

  p{
    text-align: justify;
    @include flexbox(row, wrap, space-between, center)
  }
}

你可以在这里看到它:http://codepen.io/anon/pen/xtLIG