CSS将文本右对齐，但在换行符

Question

我正在尝试将文本对齐到右边，但是当文本变长时，它应该换行并将其对齐到文本的左侧。我很难解释，这就是为什么我有一个我想要做的事情的形象：

如您所见，文本与此小div的右侧对齐。但是当发生换行时，它在逻辑上也与右边对齐。

我试图将它包装在div中，其中父项与右侧对齐，子项与左侧文本对齐。问题是我得到了这样的结果：

这仍然是错误的，因为当文本中断时，文本没有与右边对齐。有没有办法做到这一点？ 我不希望文本有最大宽度或其他东西，因为如果有足够的空间，它应该占用一行的整个宽度。

body {
    background: #cccccc;
}

.parentDiv {
  width: 100px;
  height: 100px;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.alignRight {
  margin-left: auto;
}

.alignLeft {
  text-align: left;
  padding-bottom: 5px;
}

<div class="parentDiv">
  <div class="alignRight">
    <div class="alignLeft">
      bla
    </div>
  </div>
  <div class="alignRight">
    <div class="alignLeft">
      testing cool text
    </div>
  </div>
</div>

Answer 1

第一回答：

<p class="para">
  Hello this is my text. This story is awesome. hello this is my text. This story is awesome. Hello this is my text. This story is awesome. Hello this is my text. This story is awesome. Hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome
</p>

div.para>p:first-child{
	text-align:right;
	margin-bottom:0px;
}
div.para>p:last-child{
	margin-top:0px;
  text-align:left;
	padding-left:10px;
}

编辑：

或者像这样打破你的文字......无论如何你可以在第一线和休息区玩。

<div class="para">
    <p>This is first line</p>
    <p>
        Rest of Lines... this is my text. This story is awesome. hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This
        story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome
    </p>
</div>

{{1}}

即使这不是您的意图，请查看

HTML/CSS: how to put text both right and left aligned in a paragraph

Answer 2

您可能需要填充。

body {
    background: #cccccc;
}

.parentDiv {
  width: 200px;
  height: 100px;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.alignRight {
  padding-right:50px;
  padding-left:50px;
  margin-left: auto;
}

.alignLeft {
  text-align: left;
  padding-bottom: 5px;
}

<div class="parentDiv">
  <div class="alignRight">
    <div class="alignLeft">
      bla
    </div>
  </div>
  <div class="alignRight">
    <div class="alignLeft">
      testing cool text
    </div>
  </div>
</div>

希望对您有所帮助！这是一个非常非常非常晚的答案。

提示：使用填充帮助您获得所需的内容。