将文本换行到与视口对齐的新行答案

【问题标题】：Wrapping text onto new line aligned to viewport将文本换行到与视口对齐的新行
【发布时间】：2019-01-21 22:13:25
【问题描述】：

我正在尝试将文本换行到下一行，但不是将文本直接换行在第一行下方，而是将其换行并从视口的最左侧开始。这可能吗？

<div class="wrapper">
  <p>some text</p>
  <span> / </span>
  <p class="some-long-text">this is an unnecessarily long string that will wrap to the next line on small devices</p>
</div>

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  > { display: flex; }

  .some-long-text {
    word-break: break-word;
    white-space: inherit;
    text-align: left;
  }
}

这基本上就是我所看到的：

【问题讨论】：

将flex-direction: row 更改为flex-direction: column。您可能还需要将span 放在第一段中，除非您希望它在自己的行中。
我认为您的要求是不可能的，因为没有真正的方法可以知道文本的哪些部分将被换行。您可以使用绝对定位将所有文本设置到最左侧，但我认为不可能只设置最左侧的第二行。

标签： css word-break

【解决方案1】：

这是可能的。我想这可能就是你要找的。p>

.some-text {
        display: inline;
      }
      .span-div {
        float: left;
      }
      .slash {
        padding: 0 1rem;
      }

&lt;span class="span-div"&gt;&lt;p class="some-text"&gt;some text&lt;/p&gt;&lt;span class="slash"&gt;/&lt;/span&gt;&lt;/span&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam reprehenderit vel dolores, neque perspiciatis repellendus quasi assumenda, eaque incidunt totam at officiis qui, sunt facere eveniet aliquid optio, officia atque tenetur odit iste expedita. Est officia cum, nisi, voluptatum consequuntur veniam. Suscipit excepturi repellat, adipisci delectus, unde consequatur impedit amet vero voluptates minus voluptatum aut alias, quod. Quaerat doloribus numquam alias veniam fugiat, recusandae debitis ad atque ipsam esse sit nostrum, dignissimos accusamus facere minima reiciendis rem repellendus iusto, nesciunt perferendis sequi. Voluptatum nesciunt enim et explicabo, laudantium optio iusto expedita fugiat dolores, at debitis molestiae autem, eius totam incidunt!&lt;/p&gt;

【讨论】：