css - 将文字包装到与视口(viewport)对齐的新行上

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

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

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

最佳答案

有可能的。我认为这可能是您想要的。

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

<span class="span-div"><p class="some-text">some text</p><span class="slash">/</span></span><p>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!</p>

关于css - 将文字包装到与视口(viewport)对齐的新行上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54298486/