How could Make link wraps with css - css

Question

Hello ...
How could Make link wraps with the end of the cell ?
because if the text contains links turn to a new line as shown in the picture,
So - If the div is 400px x 300px. If text enters more than 400px then the text take new line put not just the link.
like
i need it in css.
thnx ,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
#menu {
padding: 10px;
margin: 5px 5px 5px 5px;
}
#menu a {
width: 140px;
}
#menu ul {
white-space: wrap;
list-style-type: none;
}
#menu li {
white-space: wrap;
float: right;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
white-space: wrap;
position: absolute;
left: -10px;
z-index: 90;
display:none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg{
white-space: wrap;
padding: 10px;
margin: 5px 5px 5px 5px;
position:relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color:#fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body{border-top:1px solid #D1D8E7;color:#808080;}
.egg_Message{font-size:13px !important;font-weight:normal;overflow:hidden}
h3{font-size:13px;color:#333;margin:0;padding:0}
.comment_ui
{
white-space: wrap;
padding: 10px;
margin: 5px 5px 5px 5px;
border-bottom:1px solid #e5eaf1;clear:left;float:none;overflow:hidden;padding:6px 4px 3px 6px;width:331px; cursor:pointer;
}
.comment_ui:hover{
white-space: wrap;
background-color: #F7F7F7;
padding: 10px;
margin: 5px 5px 5px 5px;
}
.dddd
{
white-space: wrap;
padding: 10px;
margin: 5px 5px 5px 5px;
background-color:#f2f2f2;border-bottom:1px solid #e5eaf1;clear:left;float:none;overflow:hidden;margin-bottom:2px;padding:6px 4px 3px 6px;width:431px;
}
.comment_text{padding:2px 0 4px; color:#333333}
.comment_actual_text{display:inline;padding-left:.4em}
ol {
list-style:none;
margin:0 auto;
width:500px;
margin-top: 20px;
}
#mes{
white-space: wrap;
padding: 0px 3px;
border-radius: 2px 2px 2px 2px;
background-color: rgb(240, 61, 37);
font-size: 9px;
font-weight: bold;
color: #fff;
top: -5px;
left: -73px;
}
.toppointer{
background-image:url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 354px;
}
</style>
<div id="menu">
<ul>
<li>
<a href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer"><img src="alert/top.png" /></div>
<div id="view_comments $id"></div>
<div id="two_comments $id">
<div class="comment_ui">
<div class="comment_text">
<div class="comment_actual_text">
$all
</div></div></div></div>
<div class="bbbbbbb" id="view $id">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
View all $comment_count comments
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>

Answer 1

I may not be reading the question correctly, but if you want the links to sit on their own line, you can just set them to display: block;. E.g.
li a {display: block;}