如何让文本环绕到 div 中的同一行？

Question

我想知道 CSS 中是否有一种方法可以让文本在同一行上环绕 div。

例如，假设我在 div 中有此文本：

...我将文本放置在更右侧（假设它有绝对位置并且我设置了

left: 50%

），我想看到这个：

请注意，它不会换行到下一行，但仍保留在同一行。

这可能吗？

Answer 1

你可以从这个例子中得到一些想法

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.container,
.container2 {
  position: relative;
  display: flex;
  width: 10rem;
  height: 20px;
  background: white;
  border: 4px solid red;
}

.child {
  position: absolute;
  display: flex;
  width: 10rem;
  height: 20px;
  margin-left: -50px;
}

.charmander {
  position: absolute;
  width: 50%;
}

.charmander:first-child {
  left: 0;
}

.charmander:last-child {
  right: -84px;
}

.container2 {
  margin-top: 2rem;
  overflow-x: hidden;
}

<div class="container">
  <div class="child">
    <div class="charmander">
      CHARMANDER
    </div>
    <div class="charmander">
      CHARMANDER
    </div>
  </div>
</div>


<div class="container2">
  <div class="child">
    <div class="charmander">
      CHARMANDER
    </div>
    <div class="charmander">
      CHARMANDER
    </div>
  </div>
</div>