Jump to content

About Div Tag


kunal_kagalkar
 Share

Recommended Posts

Hello All, I am getting problem with div tag. My div tag width is 100px; but when i put text is grater than 100px length in div tag it goes outside the div but i want to break this text in next line. This problem i got. so plz Help me.
Try this code. It works fine for me in Firefox 3.5.1 and IE 7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>	<title>This is the TEST webpage</title></head><body><p>This is a test paragraph not in the div.  It should not wrap.</p><div style="width:100px">     <p>This is a test of text wrapping within a div.  If this is doing what I want, it will wrap at      100 pixels width and go down the page.</p></div></body></html>

~John

Edited by jmcgriff60
Link to comment
Share on other sites

Try this code. It works fine for me in Firefox 3.5.1 and IE 7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>	<title>This is the TEST webpage</title></head><body><p>This is a test paragraph not in the div.  It should not wrap.</p><div style="width:100px">     <p>This is a test of text wrapping within a div.  If this is doing what I want, it will wrap at      100 pixels width and go down the page.</p></div></body></html>

~John

That's not going to work if there is a string that does not have any spaces or punctuation.For example:
<div style="width:100px">     <p>ThisTextWillNotWrapBecauseItContainsNoSpacesOrPunctuation</p></div>

Link to comment
Share on other sites

That's not going to work if there is a string that does not have any spaces or punctuation.For example:
<div style="width:100px">     <p>ThisTextWillNotWrapBecauseItContainsNoSpacesOrPunctuation</p></div>

Good point. Thanks for clearing that up for me. As I understand you, the long string would have to be broken with a space (or the div allowed to stretch by using min-width instead of width.
Link to comment
Share on other sites

That's not going to work if there is a string that does not have any spaces or punctuation.For example:
<div style="width:100px">     <p>ThisTextWillNotWrapBecauseItContainsNoSpacesOrPunctuation</p></div>

sharp point ! , this case could be a problem.
Link to comment
Share on other sites

  • 2 weeks later...

I didn't know tables had word wrapping capabilities. As fas as I know, they just stretch if a word is too long.I'm not a "purist," tables are fine to use, if you use them for tabular data.Using a table for site layout makes as much sense as using an <address> element as the title of a section: it's not what the element was intended for.

Link to comment
Share on other sites

I didn't know tables had word wrapping capabilities. As fas as I know, they just stretch if a word is too long.I'm not a "purist," tables are fine to use, if you use them for tabular data.Using a table for site layout makes as much sense as using an <address> element as the title of a section: it's not what the element was intended for.
The wrap is on the td tag and is the default I believe. http://www.w3schools.com/TAGS/att_td_nowrap.asp
Link to comment
Share on other sites

The wrap is on the td tag and is the default I believe. http://www.w3schools.com/TAGS/att_td_nowrap.asp
That's the nowrap attribute. It prevents wrapping, as opposed to permitting it.You can get the same effect on any element, including divs, with a white-space: nowrap; CSS declaration.
Link to comment
Share on other sites

That's the nowrap attribute. It prevents wrapping, as opposed to permitting it.You can get the same effect on any element, including divs, with a white-space: nowrap; CSS declaration.
I linked to the nowrap to show the OP that there is a wrap on the cell contents.A simple one cell table placed inside his div will allow text contents to wrap at the width of the div.
Link to comment
Share on other sites

I linked to the nowrap to show the OP that there is a wrap on the cell contents.A simple one cell table placed inside his div will allow text contents to wrap at the width of the div.
The content would only wrap if there were spaces, slashes or newline characters, just like with every other element.Here's a quick test to prove that a table cell cannot force a long word to wrap:http://dtfox-tests.totalh.com/nowrap.html
<div style="width: 100px;border: 1px solid red;"><table><tr><td style="border: 1px solid blue">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td></tr></table></div>

Edited by Ingolme
Link to comment
Share on other sites

Yes, that's very true. Normal text content wouldn't have words longer than 30+ characters so spaces would allow a wrap but, as we know, web page requirements are never normal.Url links, larger fonts etc. would all cause it to fail. I suppose the solution all depends on the actual text content being placed in the table/div.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...