How to set width where line breaks?

Question

I'm currently working with flexbox and it forces my p tag's width to its max-width.

Anyone knows how to set a p tag's width to where line breaks?

.container {
  max-width: 190px;
  border: solid 1px #000;
  display: flex;
  justify-content: space-between;
}

.container p {
  background-color: #000;
  color: #fff;
}

.long {
  width: 114px;
}

<div class="container">
  <p>here</p>
  <p>this is short</p>
</div>

<div class="container">
  <p>here</p>
  <p>this is a very long lineeeeeee</p>
</div>

<br> Expected: p's width should only be up to where line breaks

<div class="container">
  <p>here</p>
  <p class="long">this is a very long lineeeeeee</p>
</div>

You have to specify either ```width``` as you did, or simply add some ```margin```. — prettyInPink, May 12 '21 at 09:23

score 0 · Answer 1 · answered May 12 '21 at 09:31

You can use gap: property in css to create gap between two elements of flexbox or grid.

.container {
  max-width: 190px;
  border: solid 1px #000;
  display: flex;
  gap: 3rem;
  justify-content: space-between;
}

.container p {
  background-color: #000;
  color: #fff;
}

.long {
  width: 114px;
}

<div class="container">
  <p>here</p>
  <p>this is short</p>
</div>

<div class="container">
  <p>here</p>
  <p>this is a very long lineeeeeee</p>
</div>

<br> Expected: p's width should only be up to where line breaks

<div class="container">
  <p>here</p>
  <p class="long">this is a very long lineeeeeee</p>
</div>

browser support for gap to flex is good enough to recommend as an only solution? — Dejan.S, May 12 '21 at 10:08

Szegoo · Answer 2 · 2021-05-13T05:11:31.420

You can use width: min-content, and then apply white-space: nowrap, because if you don't apply this white space property every word would be in a new row

.container {
  max-width: 250px;
  border: solid 1px #000;
  display: flex;
  justify-content: space-between;
}

.container p {
  background-color: #000;
  color: #fff;
  width:min-content;
  white-space: nowrap;
}

<div class="container">
        <p>here</p>
        <p>this is short</p>
    </div>

    <div class="container">
        <p>here</p>
        <p>this is a very long lineeeeeee</p>
    </div>

    <br> Expected: p's width should only be up to where line breaks

    <div class="container">
        <p>here</p>
        <p class="long">this is a very long lineeeeeee</p>
    </div>

you should write you example code so that it can run Witherspoon HTML et. — chrwahl, May 12 '21 at 14:59

How to set width where line breaks?

2 Answers2