调整 div 宽度以适应换行后的文本

Question

I would like to resize a div width to make it always fit the text inside even when there is a line-break.

Is there a way to modify the width to make it fit the text after a line break using javascript?

 body{ width: 600px; margin: 0px auto; } #container { border: 15px solid orange; display: flex; align-items: center; justify-content: space-between; } #firstDiv{ border: 10px solid brown; width: 130px; margin: auto 20px; } #secondDiv{ border: 10px solid skyblue; display: flex; align-items: center; margin: auto 20px; } #icon{ height: 24px; width: 24px; background-color: yellow; margin-right: 10px; } #thirdDiv{ border: 5px solid yellowgreen; width: 200px; margin: auto 20px; }

 <div id="container"> <div id="firstDiv">FIRST</div> <div id="secondDiv"> <span id="icon"></span> <span id="legend">I want the #secondDiv width to fit this text</span> </div> <div id="thirdDiv">THIRD</div> </div>

Edits:

The problem is because there is some blank space at the end of the #secondDiv the space between #firstDiv and #secondDiv appears not the same than between #secondDiv and #thirDiv when there is no borders.

Answer 1

If you instruct that element to use all of the remaining space ( width:100% ) the text will fill whatever space it can.

 body{ width: 600px; margin: 0px auto; } #container { border: 15px solid orange; display: flex; align-items: center; justify-content: space-between; } #firstDiv{ border: 10px solid brown; width: 130px; margin: auto 20px; } #secondDiv{ border: 10px solid skyblue; display: flex; align-items: center; margin: auto 20px; width:100%; /* Instruct element to take 100% of the remaining space */ } #icon{ height: 24px; width: 24px; background-color: yellow; margin-right: 10px; } #thirdDiv{ border: 5px solid yellowgreen; width: 200px; margin: auto 20px; }

 <div id="container"> <div id="firstDiv">FIRST</div> <div id="secondDiv"> <span id="icon"></span> <span id="legend">I want the #secondDiv width to fit this text</span> </div> <div id="thirdDiv">THIRD</div> </div>

Answer 2

I have just changed some css code to make this three div be inline and deleted display:flex

 body{ width: 600px; margin: 0px auto; } #container { border: 15px solid orange; text-align: center; justify-content: space-between; } #firstDiv{ border: 10px solid brown; width: 130px; margin: auto 5px; display:inline-block; } #secondDiv{ border: 10px solid skyblue; text-align: center; margin: auto 5px; width:auto; display:inline-block; } #icon{ height: 24px; width: 24px; background-color: yellow; margin-right: 10px; } #thirdDiv{ border: 5px solid yellowgreen; margin: auto 5px; display:inline-block; width:auto; text-align: center; }

 <div id="container"> <div id="firstDiv">FIRST</div> <div id="secondDiv"> <span id="icon"></span> <span id="legend">I want the #secondDiv width to fit this text</span> </div> <div id="thirdDiv">THIRD</div> </div>