将文字包装到与视口对齐的新行上

Question

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

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

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

Answer 1

有可能。我想这可能就是您要寻找的。

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