3 columns and long text created by a user

HTML & CSS
1 
<!doctype html> 
<html> 
  
  <head> 
    <meta charset="UTF-8"> 
    <title>collapse1</title> 
  </head> 

<style type="text/css">

.wrapper {
 margin:0px auto;
 text-align:left;
 border:0px; 
 overflow:hidden;
clear:left;
}


.center {
 float:left;
 width:100%;
 margin:0 -250px 0 -250px;
}

.content {
[COLOR="Red"]border-collapse:collapse;[/COLOR]
margin:0 250px 0 250px;
border:2px solid green;
padding:5px;
background-color:#ddffdd;
}

.left {
 width:250px;
 float:left;
}

.right {
 width:250px;
 position:relative;
 float:right;
 z-index:1;
}
</style>

<body> 

<div class="wrapper">
  <div class="left">left column</div> 
 
  <div class="center"> 
  <div class="content"> 
 
    content created by a user<br>
    content created by a user<br>
    content created by a user<br>
    content created by a user<br>
    content created by a user<br>
    content created by a user<br>
    content created by a user<br>
    content created by a user<br><br>
    longTextByUserlongTextByUserlongTextByUserlongTextByUserlongTextByUser
  </div>
  </div> 
  
  <div class="right">right column</div>  
</div>

</body> 
</html>

I have the code above at http://dot.kr/x-test/collapse1.php

How can I make a line break in the long text without any space?
(I like to know whether it’s possible or not.)

2

word-wrap: break-word;

(it’s part of CSS3, but works in IE7/8, FF3.5+, Chrome)

3

You can insert a “soft-hyphen”, with the character entity &shy;, which allows the browser to hyphenate the word there if it needs to, but if it can fit the whole word in then it will. You might want to put more than one of these in at appropriate points where you want to allow a break.