Geek Answers Handbook

In the next line, the text leaves the div field

Below is my HTML:

<div class="title-box"> <div class="box1" style="background-image:url(/common/images/arrow-r.png); background-repeat: no-repeat; background-position: left center; margin:5px 0px 5px 5px;"> <h1>Welcome to the PHP and CSS</h1> </div> </div>

And here is my CSS:

 .title-box { border: 1px dashed #CCC; float: left; width: 540px; margin-bottom: 20px; word-wrap:break-word; } .title-box .box1 { font-size: 15px; padding: 5px; } .title-box .box1 h1 { padding: 5px; text-align: left; color: #fff; margin-left: 35px; }​

Here the <h1> contains the title. If the title contains more text, for example:

 <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h1>

Then it moves on to the next line, but the next line text leaves the div field. I have provided a width for the main div still exiting the div window. I also tried adding width to the <h1> , but the problem still persists.

Any help. Thanks

+4
source share
4 answers

because you used 540px width in .title-box

after removing the width http://jsfiddle.net/au5Jf/

but it will still be used on a new line if the width of the .title-box less than the width of the entire content

if you want to embed content in one line, you can set the width width:950px; in .title-box http://jsfiddle.net/XQXV2/

+5
source

Actually your div width is fixed, and your text has a width greater than the div, so it exits. set div width to auto

 .title-box { border: 1px dashed #CCC; float: left; width: auto; margin-bottom: 20px; }
+2
source

Live demo

 <div class="title-box"> <div class="box1" style="background:#000; background-position: left center; margin:5px 0px 5px 5px;"> <h1>Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS Welcome to the PHP and CSS</h1> </div> </div>

CSS

  .title-box{width:100%; word-wrap:break-word;} .title-box .box1{font-size: 15px; padding:10px;} .title-box .box1 h1{padding: 5px; text-align:justify; color: #fff;}​

Add only a word-wrap:break-word; in .title-box

+1
source

Just use the CSS property. I encountered the same problem, but it is being solved

 #divname { word-wrap: break-word; }
+1
source

More articles:


All Articles