Element exactly as narrow as contained text?

Question

How do I get a text element, for example <p> to dynamically be exactly the same width as the text? If the text is forced to new rows by a parent or the document width.

You can see the problem illustrated here:

.wrapper {
  background-color:#ff0000;
  padding:10px;
  width:530px;
}
p {
  background-color:#00ff00;
  display:inline-block;
  width:auto;
}

<div class="wrapper">
  <p>This sentance wants to be alone on it's row.</p>

  <p>Now we want this element to be as narrow as possible. Removing this space: before-this-word.</p>
</div>

I have tried to find answers for this, but can't find any.

I already closed the question as duplicate and you will find the link on the top — Temani Afif, Sep 04 '19 at 15:53
@TemaniAfif Okay, well there wasn't really any good keywords in that title so I understand why I couldn't find it. — Peter Westerlund, Sep 04 '19 at 15:56
I'm not allowed to post an answer here. So how do I mark this question as "solved" since the answer is that it's not possible to do what I want in the question? — Peter Westerlund, Oct 16 '19 at 08:47
you have to do nothing, "it's not possible" is the answer giving by the duplicate. This is the purpose of a duplicate: to avoid adding more answers here since all the answers are already in the duplicate — Temani Afif, Oct 16 '19 at 08:50

Deepu Reghunath · Answer 1 · 2019-09-04T15:49:54.300

1

Give display: initial or inline instead of inline-block;

.wrapper {
  background-color:#ff0000;
  padding:10px;
  width:530px;
}
p {
  background-color:#00ff00;
  display: initial; /*or  display: inline; */
  width:auto;
}

<div class="wrapper">
  <p>This sentance wants to be alone on it's row.</p>
  <br/>
  <p>Now we want this element to be as narrow as possible. Removing this space: before-this-word.</p>
</div>

edited Sep 04 '19 at 15:49

answered Sep 04 '19 at 15:40

Deepu Reghunath

8,132
2
38
47

1

note that `initial` of display is `inline` – Temani Afif Sep 04 '19 at 15:46
1

a `p` is a block level element, `initial` would result in it acting as if it was a block level element again. – Adrian Roworth Sep 04 '19 at 16:01
@AdrianRoworth no, this is false. Initial means inline and doesn't mean the *initial* display set by the browser. So even for `p` or `div` it will be `inline` – Temani Afif Sep 04 '19 at 18:36
@TemaniAfif https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value. `The initial value of a CSS property is its default value, as listed in its definition table` – Adrian Roworth Sep 05 '19 at 13:28
@AdrianRoworth and you know what is the *definition table*? check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/display#Specifications it's at the bottom of Spec list where you will see `Initial value inline` (by the way it is already clear from the example that `p` is behaving as inline here not as block) – Temani Afif Sep 05 '19 at 13:30
@TemaniAfif cheers for the heads up! I read this part of the definition: `The initial value of a CSS property is its default value` and because a `
` is a block level element assumed `default` meant `block`. This could be far clearer by just explicitly saying what you are saying! :D
– Adrian Roworth Sep 06 '19 at 09:43

score 0 · Answer 2 · answered Sep 04 '19 at 15:40

Add white-space: nowrap; to your css, Any element with white-space: nowrap stays on one line

.wrapper {
  background-color:#ff0000;
  padding:10px;
  width:auto;
}
p {
  background-color:#00ff00;
  display:inline-block;
  width:auto;
  white-space: nowrap;
}

<div class="wrapper">
  <p>This sentance wants to be alone on it's row.</p>

  <p>Now we want this element to be as narrow as possible. Removing this space: before-this-word.</p>
</div>

Sorry, but it has to be able to be multiple rows. – Peter Westerlund Sep 04 '19 at 15:49 — Peter Westerlund, Sep 04 '19 at 15:49

Element exactly as narrow as contained text?

2 Answers2