etsted Posted April 30, 2014 Share Posted April 30, 2014 when content overflows a div i want i text to be able to be able to continue on the next line automaically if the width of the div is to small. I am not talking about the overflow property. Link to comment Share on other sites More sharing options...
davej Posted April 30, 2014 Share Posted April 30, 2014 You need to work on providing clearer explanations because I don't know what you mean. A div will automatically expand to hold the contents if you don't apply fixed dimensions to it. You can also use overflow:auto to obtain an automatic scroll bar. <!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title><style>#div01{width:300px;border:3px solid red;}#div02{width:300px;min-height:350px;border:3px solid green;}#div03{width:300px;height:200px;overflow:auto;border:3px solid blue;}</style></head><body><div id="div01">aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. <b>This div will expand as necessary to contain the text but would collapse to zero-height if empty.</b></div><div id="div02">aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. <b>This div will expand as necessary to contain the text but also has a minimum height.</b></div><div id="div03">aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. <b>This div has a fixed size but a scrollbar will appear when it is needed.</b></div></body></html> Link to comment Share on other sites More sharing options...
etsted Posted May 1, 2014 Author Share Posted May 1, 2014 this div "<div style='border:1px red solid;width: 298px; text-overflow:ellipsis;'>Description: $description afdfdsafdasfdsdafdfdsdddfssdffdsdfsdfdfsfdsafdsdfddsf</div>" will only make the tekst go beyond the border, instead of starting on a new line Link to comment Share on other sites More sharing options...
dsonesuk Posted May 1, 2014 Share Posted May 1, 2014 that is what text-overflow:ellipsis does, if you don't want that, don't use it. Link to comment Share on other sites More sharing options...
davej Posted May 1, 2014 Share Posted May 1, 2014 That is another option, but all it does is add ellipsis to tell you when it has overflowed. You can still use overflow:auto and obtain a scrollbar. Apparently the ellipsis option only works on single-line fields. http://www.w3schools.com/cssref/css3_pr_text-overflow.asp Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now