kunal_kagalkar Posted July 23, 2009 Share Posted July 23, 2009 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. Link to comment Share on other sites More sharing options...
Ingolme Posted July 23, 2009 Share Posted July 23, 2009 There's no way to force text to wrap. You will have to break up the text. Alternatively, you could allow the box to stretch using the CSS min-width. Link to comment Share on other sites More sharing options...
jmcgriff60 Posted July 25, 2009 Share Posted July 25, 2009 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 Link to comment Share on other sites More sharing options...
Ingolme Posted July 25, 2009 Share Posted July 25, 2009 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 More sharing options...
jmcgriff60 Posted July 26, 2009 Share Posted July 26, 2009 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 More sharing options...
uwspstar Posted July 27, 2009 Share Posted July 27, 2009 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 More sharing options...
Zath Posted August 7, 2009 Share Posted August 7, 2009 sharp point ! , this case could be a problem.Not for the purists maybe but could you use a single cell table with the div and utilise the table's word wrapping capabilities ? Link to comment Share on other sites More sharing options...
Ingolme Posted August 7, 2009 Share Posted August 7, 2009 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 More sharing options...
Zath Posted August 7, 2009 Share Posted August 7, 2009 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 More sharing options...
Ingolme Posted August 7, 2009 Share Posted August 7, 2009 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 More sharing options...
Zath Posted August 7, 2009 Share Posted August 7, 2009 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 More sharing options...
Ingolme Posted August 7, 2009 Share Posted August 7, 2009 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> Link to comment Share on other sites More sharing options...
Zath Posted August 7, 2009 Share Posted August 7, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.