Responsive framework problem with small columns.

[daytona10]

Hello everyone, I am making a responsive framework for myself to quickly use in my projects. I got the columns the correct size and all but I have a problem that text will go outside of the column if it's too long. Here is my Css code.

body{background:green;}.row{display:block; width:100%; overflow: auto; margin: 0px 0;}.container{width:1170px;background:white;margin: 0px auto;}.column1,.column2,.column3,.column4,.column5,.column6,.column7,.column8,.column9,.column10,.column11,.column12{margin:10px 1.041667%; float:left; background: #f0f0f0; box-shadow: 0px 0px 1px 1px #e1e1e1; border-radius: 2px; }.column1{width:6.25%; display:block;}.column2{width:14.583333%; display:block; }.column3{width: 22.91667%; display: block;}.column4{width: 31.25%; display: block;}.column5{width: 39.583333%; display: block;}.column6{width: 47.916667%; display: block;}.column7{width: 56.25%; display: block;}.column8{width: 64.583333%; display: block;}.column9{width: 72.916667%; display: block;}.column10{width: 81.25%; display: block;}.column11{width: 89.583333%; display: block;}.column12{width: 97.916667%; display: block;}.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}

and here is an image explaining the problem. As you see, the word columns partially comes out of the actual column itself. On the right is more of the code. Any suggestions?

Edited May 28, 2013 by daytona10

[newseed]

Well, think about that. How do you suppose the text 'Column' to behave? Of course it's going to blow out of the containing div. You have a couple of choices. 1. The font size should be changed to fit the size of the box2. Use CSS property word-break to force the word to break. Keep in mind that word-break is not support the same in different browsers.

[daytona10]

Well, think about that. How do you suppose the text 'Column' to behave? Of course it's going to blow out of the containing div. You have a couple of choices. 1. The font size should be changed to fit the size of the box2. Use CSS property word-break to force the word to break. Keep in mind that word-break is not support the same in different browsers.

Mentioning the word-break made me remember word wrap. I used

word-wrap: break-word;

and it all works now. Thank you!

Edited May 28, 2013 by daytona10