html - 如何使溢出的文本朝一个方向移动而不是将其隐藏

Question

我有这段 html 代码，如果它溢出我想移到左边，它目前看起来像这样:

.main section {
  font-size: 101%;
  color: #262626;
  margin-bottom: 5px;
  margin-left: 30px;
  width: 180px;
  display: block;
}
.main section b {
  color: #1a1a1a;
  width: 100px;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: -4px;
}

<div class="main">
<section>
g'day, <b>captain</b><br />
</section>
<p>status: sunken</p>
</div>

目前看起来像这样:

g'day captain
status: sunken

但我更喜欢它看起来像这样:

 g'day captain
status: sunken

或者如果它真的很长，像这样:

g'day captainamerica
      status: sunken

如果仍然不清楚，我想让部分文本在太长的情况下向左移动，而其余内容保持不变。

Answer 1

您正在寻找的属性是 text-align: right; 或者如果您想做一些更复杂的事情，请使用 flex 属性:

display: flex;
flex-direction: column;
align-items: flex-end;

在您的示例中，您应该去掉每个元素上的 margin-left 和 width。我已将 width 属性添加到 main 类，因此您可以看到它正在工作。

.main {
  text-align: right;
  width: 200px;
}

.main section {
  font-size: 101%;
  color: #262626;
  margin-bottom: 5px;
  display: block;
}

.main section b {
  color: #1a1a1a;
  white-space: nowrap;
  margin-bottom: -4px;
}

<div class="main">
  <section>
    g'day, <b>captain</b>
  </section>
  <section>
    g'day, <b>captain</b>america
  </section>
  <p>status: sunken</p>
</div>