Question 174918 in Html Question posted in
Some basic documentation can be found here.

What are the benefits of using a rewrite rule?

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

.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;
}
<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>
Tags:

2

Answers


  1. 0

    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.

    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>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>
    Login or Signup to reply.
  2. 0

    you can use margin-left and margin-right: auto; and 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search