CODEWITHSUNDEEP
htmlcsstextoverflow
Mohammadsharif Rahimi
Mohammadsharif Rahimi

Reputation: 11

How to break text to new line when the width of parent div of it received to full screen?

I have to Div. One in right and one in the left of the right Div. The right Div has fixed size (300px). But the left Div has no width and contain some texts. When the text of left Div increase, the width of parent Div of it also increase automatically and finally receive to full screen but the text of it overflowing! I want to break the text to bottom. I don't want to set a fix width for parent Div of it. Also I don't want to use width:calc(100%-300px) for parent Div of text to fix it width. I use white-space:pre-line but it doesn't work! How can I flex the Div that contain text without overflowing the text from it? Thanks. Here is some example codes:

.div-1 {
  float: right;
  width: 300px;
}

.div-2 {
  float: right;
}
<div class='div-1'>
</div>
<div class='div-2'>
  <h3>Some text here...</h3>
</div>

Upvotes: 0

Views: 7863

Answers (3)

TomKorec
TomKorec

Reputation: 226

You can wrap both divs into a container and set it's display to flex. Also, add flex property to the .div-2 and set it to 1.

.div-1 {
  width: 200px;
}

.div-2 {
  flex: 1;
}

.container {
  display: flex;
  width: 100%;
}

<div class="container">
 
  <div class='div-2'>
    <h3>Text</h3>
  </div>
   <div class='div-1'>
  </div>
</div>

If you want your content to be floating right, set the container width and float properties accordingly.

Example when adding longer text

Upvotes: 0

wangdev87
wangdev87

Reputation: 8751

you can use white-space CSS style

h3 {
    white-space: break-spaces;
}

break-spaces value is identical to the value of pre-wrap, except that:

  • Any sequence of preserved white space always takes up space, including at the end of the line.
  • A line breaking opportunity exists after every preserved white space character, including between white space characters.
  • Such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes (min-content size and max-content size).

Upvotes: 4

Ghayas Ud Din
Ghayas Ud Din

Reputation: 335

you can use br where u want to end your first line or you can give max-width to the parent div so it will not be a fixed width.

Upvotes: 0

Related Questions