英文:
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 -->
<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 -->
答案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 -->
<div class="container">
<sup>1</sup>
<div class="RichText">
<div 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>
<!-- 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 -->
<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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论