css - 如何使链接与 css 换行

Question

你好...

如何使链接在单元格末尾换行？

因为如果文本包含链接会换行，如图所示，

所以 - 如果 div 是 400px x 300px。如果输入的文本超过 400px，则文本将换行，而不仅仅是链接。

喜欢

我需要它在 css 中。

谢谢，

<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;">

<a href="#" class="view_comments" id="$id">View all $comment_count comments</a>

                    </div>
                </div>
            </li>
        </ul>

        </li>
    </ul>
</div>

Answer 1

我可能没有正确阅读问题，但如果您希望链接位于它们自己的行上，您可以将它们设置为 display: block;。例如

li a {display: block;}