CODEWITHSUNDEEP
htmlcss
user1405177
user1405177

Reputation: 477

Word-wrap all text and fit div to size of a child?

I have the following html code:

<div class="container">
    This is just some text. This is just some text. This is just some text.<br><br>
    <label>Input: <input type="text"></label>
</div>

I need the div to be the width of the <label> and the text to wrap.

Without the text, I can make .container inline-block so it fits to the label, but it will otherwise stretch with the text.

How it should loook

Is this possible?

Upvotes: 0

Views: 93

Answers (1)

Troy Gizzi
Troy Gizzi

Reputation: 2520

The following example uses CSS to accomplish this: display: table-caption; on the div, and white-space: nowrap; on the label.

Click the "Run code snippet" button below to see how it actually renders. (It's just HTML with embedded CSS; no JavaScript.)

<div class="container" style="display: table-caption;">
	This is just some text. This is just some text. This is just some text.<br><br>
	<label style="white-space: nowrap;">Input: <input type="text"></label>
</div>

Upvotes: 1

Related Questions