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>

- Southgarden116

---

分享你的代码片段 - Jaykumar Gondaliya

这里有一个 JSFiddle：https://jsfiddle.net/x8wjv6mk/ - Southgarden116

尝试将"text-align: justify;"应用于".alignLeft"。 - Supraja Ganji

@SuprajaGanji 在我的例子中，'testing' 会在左边，'cool' 会在右边。 :/ - Southgarden116

Answer 1

第一个答案：

p.para{
text-indent: 30px;
padding-left:15px;
}

<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>

即使这不是您的意图，请查看以下内容：

HTML/CSS：如何在段落中将文本右对齐和左对齐

- amitdigga

---

谢谢，但问题是，我希望下一行从第一行的确切位置开始，就像我在第一张图片中画红线的地方。 - Southgarden116

刚刚添加了 padding-left:15px，这是你想要的吗？ - amitdigga

很遗憾，您的文本不会靠右对齐，它只会向左填充。因此，如果文本小于可用宽度，则不会靠右对齐。 - Southgarden116

看看新答案。 - amitdigga

不，那仍然不是我想要的。另一个问题的建议链接也不是我想要的。但是谢谢你尝试帮助我！ :) - Southgarden116

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>

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

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

- Code...