在CSS中，当文本位于div元素内时，如何使文本环绕其他文本？

huangapple
go评论67阅读模式
英文:

Get text to wrap around other text when inside a div in CSS?

问题

我有一个情况，需要在一些富文本的免责声明文本之前放置一个上标数字（用于免责声明）。这些富文本深埋在具有自己样式的 div 中。我应该如何使其像这样环绕在上标周围？

1 一些文本 一些文本 一些文本 一些文本 ...
一些文本 一些文本 ...

而我现在能做的是以下之一：

1 一些文本 一些文本 ...
... 一些文本 一些文本

或

1
一些文本 一些文本 ...
... 一些文本 一些文本

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
.container {
  box-sizing: border-box;
}

sup {
  background: yellow;
  display: inline-block;
  padding: 6;
  float: left;
  margin-right: 20px;
  box-sizing: border-box;
}

.RichText {
  background: green;
  box-sizing: border-box;
}

<!-- language: lang-html -->
<div class="container">
  <sup>1</sup>
  <div class="RichText">
    <div class="RichTextStyled">
      <div contenteditable="false" translate="no" class="ProseMirror">
        <p>I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.
        </p>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->
英文:

I have a situation where I need to put a superscript number (for disclaimer) before some rich text disclaimer text. The rich text is deeply inside some divs with their own styling. How can I get it to wrap around the superscript like this?

1 sometext sometext sometext sometext ...
sometext sometext ...

Instead what I am able to do is one of these:

1 sometext sometext ...
  ... sometext sometext

Or

1
sometext sometext ...
... sometext sometext

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  box-sizing: border-box;
}

sup {
  background: yellow;
  display: inline-block;
  padding: 6;
  float: left;
  margin-right: 20px;
  box-sizing: border-box;
}

.RichText {
  background: green;
  box-sizing: border-box;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;sup&gt;1&lt;/sup&gt;
  &lt;div class=&quot;RichText&quot;&gt;
    &lt;div class=&quot;RichTextStyled&quot;&gt;
      &lt;div contenteditable=&quot;false&quot; translate=&quot;no&quot; class=&quot;ProseMirror&quot;&gt;
        &lt;p&gt;I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

Sure, here's the translated content:

"由于我假设您无法更改HTML，您可以始终将SUP浮动到左侧，并给它一个右边的外边距以将其间隔开。

sup {
  background: yellow;
  display: inline-block;
  padding: 6;
  float: left;
  margin-right: 10px;
}

.RichText {
  background: green;
}

<div class="container">
  <sup>1</sup>
  <div class="RichText">
    <div class="ProseMirror">
      <p>我是一些跨越多行的富文本。我是一些跨越多行的富文本。我是一些跨越多行的富文本。</p>
    </div>
  </div>
</div>
英文:

Since I'm assuming you can't change the HTML, you can always float the SUP left and give it a margin right to space it out.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

sup {
  background: yellow;
  display: inline-block;
  padding: 6;
  float:left;
  margin-right:10px;
}

.RichText {
  background: green;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;sup&gt;1&lt;/sup&gt;
  &lt;div class=&quot;RichText&quot;&gt;
    &lt;div class=&quot;ProseMirror&quot;&gt;
      &lt;p&gt;I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

你可以使用 margin-left 和 margin-right: auto; 以及 position: absolute;

.container {
  box-sizing: border-box;
}

sup {
  background: yellow;
  margin-right: auto;
  margin-left: 0;
  position: absolute;
}

.RichText {
  background: green;
  box-sizing: border-box;
}

<div class="container">
  <sup>1</sup>
  <div class="RichText">
    <div class="RichTextStyled">
      <div contenteditable="false" translate="no" class="ProseMirror">
        <p>I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.</p>
      </div>
    </div>
  </div>
</div>
英文:

you can use margin-left and margin-right: auto; and position: absolute;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  box-sizing: border-box;
}

sup {
  background: yellow;
  margin-right: auto;
  margin-left: 0;
  position: absolute;
}

.RichText {
  background: green;
  box-sizing: border-box;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;sup&gt;1&lt;/sup&gt;
  &lt;div class=&quot;RichText&quot;&gt;
    &lt;div class=&quot;RichTextStyled&quot;&gt;
      &lt;div contenteditable=&quot;false&quot; translate=&quot;no&quot; class=&quot;ProseMirror&quot;&gt;
        &lt;p&gt;I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月25日 00:00:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76325432.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定