将文字换行

Question

I have a problem to display the content of p inside a div . If my p is too long, i wish to break it down to a new line. But right now, it just keep stretching. How can I fix it to display as the block within a div? Thank you.

 .box { position: relative; width: 25%; padding-bottom: 25%; background: #fff; } .boxInner { position: absolute; left: 5px; right: 5px; top: 5px; bottom: 5px; overflow: hidden; } .boxInner img { width: 100%; } .boxInner .titleBox { background: #000; background: rgba(0, 0, 0, 0.9); color: #FFF; padding: 10px; text-align: center; height: 42%; position: absolute; display: block; } .titleBox1 { top: 0; left: 0; right: 0; } .titleBox2 { bottom: 0; left: 0; right: 0; } 

 <div class="box"> <div class="boxInner"> <div class="titleBox titleBox1" > <p> asdasdasdasdddddddddasdddddddddddddddddddd </p> </div> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /> <div class="titleBox titleBox2">An old greenhouse</div> </div> </div>> 

Answer 1

Your p element content is asdasdasdasdddddddddasdddddddddddddddddddd , which does not contain any permissible line breaking points. You need to define where and how it may be broken and then insert eg either zero-width spaces or soft hyphens. If you need help with this, you should post a description of your real content in the p element, illustrated with real examples, and specify the principles according to which it can be broken.

Answer 2

add something to the css class

p{ word-wrap:break-word; width:100px; }

I think word-wrap can't work well without setting width in css.