如何用CSS填补固定宽度父内部的短文本？

Question

这是我的目标

尝试添加text-align

但似乎文字不够长。

如何让短文填写父母的宽度？

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

Answer 2

您可以尝试增加单词间距。

例如：

.myClass{
word-spacing:15px;
}

Answer 3

您可以使用letter-spacing: 20px;玩数字，直到您获得正确的宽度。 或word-spacing: 20px;