Set element's width strictly equal to it's text content

Question

Consider this example:

body {
  width: 330px;
  padding: 20px;
}

p {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  background-color: lime;
}

p:after {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  content: '';
  width: 10px;
  height: 10px;
  background-color: red;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

Open in JSFiddle

---

It will generate the following layout:

---

Is there a browser-compatible way to make paragraph element's width (green box) strictly equal to it's text content? I want red marked to be rendered at the top right position of the last word on the first line (near the letter "r" of word "consectetur" of the example). Like this:

---

I'm setting the body width to 330px just to demonstrate what would happen if user would resize it's window to such dimension. I want the solution to be fully-responsive.

Also, what exactly is causing this behavior in browser? Could you explain the rendering mechanics behind this?

---

Similar Questions

• Fit block width to content when text wraps due to max-width
• max-width adjusts to fit text?

Answer 1

Set the element's width to auto.