0

I want to set a fixed width to a parent element and I want to put long text in it. but when text's length get bigger than it's parent 's width, it just exceeds it's parent's width, not to move to the next row.

So what i want to do is to make a flexible box that keeps it's context in its fixed width length ( of course the height of the box can change depending on the number of rows. )

Here is a simple code. 

<style type="text/css">
.wrap {position:relative; width:500px; border:1px solid red;}
.child {width:50%; padding:5px;  border:1px solid blue;}
</style>

<div class="wrap">
<div class="child">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
James David Deann
  • 151
  • 1
  • 1
  • 10
  • https://developer.mozilla.org/en-US/docs/Web/CSS/word-break – Temani Afif Feb 11 '19 at 12:29
  • What you need is the `word-wrap` css attribute. Set it to `break-word` to let it wrap to the next line. – Titulum Feb 11 '19 at 12:31
  • Thank you ! Can I also ask what should I do If i want to do this on block levels? like I have this parent with value of display:flex and width :500px; and if it has three child blocks with width:50%, then it exceeds it's parent's domain, if you want to keep all child element in its parent, what can I do? – James David Deann Feb 11 '19 at 12:34

0 Answers0