Fit element's width to wrapped text

Question

In the below snippet, notice how the paragraph element is actually wider than its wrapped content. Is it possible to make the paragraph's width to exactly equal text width? I don't want to set p width explicitly, because it needs to be responsive.

div {
  width: 110px;
}

p {
  background-color: #ff0;
}

<div>
  <p>
    asda sdzxf vzfsdf   asdsdsdsddf dfsdf 
  </p>
  </div>

edit:

So I've managed to achieve the result I've wanted. Sorry if I wasn't precise enough with my question. Here it is:

div {
  background-color: #f0f;
  width: 10%;
  display: flex;
  align-items: baseline;
}

p {
  background-color: #ff0;
  display: inline;
}

i {
  display: inline-block;
}

<div>

  <p>
    asda sdzxf vzfsdf asdsdsdsddf dfsdf
  </p>
  <i>icon</i>
</div>

It's not possible for the text you have as the text is wrapping over multiple lines, the best you could do is just give it a width as a percentage — Pete, Mar 31 '17 at 08:15

score 1 · Answer 1 · 2017-03-31T08:37:06.397

1

I'm not sure exactly what you're asking for, I might be able to help if you make a preview in a snippet.

I think this is what you're looking for but not sure so if it's not, try to better explain your requirements.

You would probably have this contained which would control the layout/flow

#container {
  width: 50%;
}

div {
  width: auto;
  display: inline-block;
}

p {
  background-color: #ff0;
}

<div id="container">
  <div>
    <p>
      asda sdzxf vzfsdf asdsdsdsddf dfsdf asda sdzxf vzfsdf asdsdsdsddf dda sdzxf vzfsdf asdsdsdsddf dfsdf asda sdzxf vzfsdf asdsdsdsddf dfsdf asda sdzxf vzfsdf asdsds
    </p>
  </div>
</div>

edited Mar 31 '17 at 08:37

answered Mar 31 '17 at 08:22

You can see the preview when you run the code snippet. There's an empty space at the right side of the paragraph. It's different size depending on the way the text was wrapped (width of the container). My actual task is to put an icon immediately on the right of the first line of the paragraph. Since it is suppose to be responsive, sometimes that icon is quite far to the right of the text. – kihu Mar 31 '17 at 08:26
You can just set the div to display: inline-block and make the width: auto. This will make the div as wide as the text because it's no longer a block element, width is determined by the text. – Mar 31 '17 at 08:30

score -1 · Answer 2 · answered Mar 31 '17 at 08:14

-1

div {
  width: Auto;
}

p {
  width:Auto !important;
  background-color: #ff0;
}

<div>
  <p>
    asda sdzxf vzfsdf   asdsdsdsddf dfsdf 
  </p>
  </div>

answered Mar 31 '17 at 08:14

Vivek Singh

646
3
10
25

Fit element's width to wrapped text

2 Answers2