Jump to content
Sign in to follow this  
kunal_kagalkar

About Div Tag

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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>

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...