css样式截取新闻标题

来源：互联网发布：香港二线知乎编辑：程序博客网时间：2024/06/05 22:16

.content ul li
        {
            border-bottom: 1px solid #F0F0F0;
            height: 21px;
            overflow: hidden; /*首先设定列表的高度，然后用溢位隐藏*/
            line-height: 21px; /*字体行高最好要和列表高度一样或者大些*/
            background: url(images/dot.gif) no-repeat 0px 8px;
            padding-left: 10px;
        }

----------------html 1-----------

<html>
<head>
    <style type="text/css">
        /**/ body
        {
            font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
            background-color: #F8F8F8;
            color: #333;
        }
        a:link, a:visited
        {
            text-decoration: none;
            font-size: 12px;
            color: #333333;
        }
        a:hover
        {
            text-decoration: underline;
            color: #0066FF;
        }
        .content
        {
            float: left;
            width: 40%;
            height: auto;
            border: 1px solid #ccc;
            background-color: #FFF;
        }
        .content ul
        {
            padding: 3px;
            padding-bottom: 6px;
            margin: 0;
            list-style: none;
        }
        .bar
        {
            color: #FFF;
            height: 20px;
            font-weight: bold;
            background: #698FC7;
            text-indent: 15px;
            line-height: 20px;
            margin: 0px;
            padding: 0px;
            border: 3px double #698FC7;
        }
        .bar a:link, .bar a:visited, .bar a:hover
        {
            color: #FFF;
            text-decoration: none;
        }
        #date
        {
            float: right;
        }.content ul li
        {
            border-bottom: 1px solid #F0F0F0;
            height: 21px;
            overflow: hidden; /*首先设定列表的高度，然后用溢位隐藏*/
            line-height: 21px; /*字体行高最好要和列表高度一样或者大些*/
            background: url(images/dot.gif) no-repeat 0px 8px;
            padding-left: 10px;
        }
    </style>
    
</head>
<body>
    <div class="content">
        <h2 class="bar">
            <a href="list?tid=7">程序发布</a></h2>
        <ul>
            <li><span id="date">[11-29]</span>[<a href="#">测试程序</a>] <a href="#" title='test'>test
                test test test test test test test test test test test test test test test test
                test test test test test test test test test test test test test</a></li>
            <li><span id="date">[10-25]</span>[<a href="#">程序补丁</a>] <a href="#" title='发布可编辑评论补丁'>
                发布可编辑评论补丁发布可编辑评论补丁发布可编辑评论补丁</a></li>
            <li><span id="date">[10-11]</span>[<a href="#">最新程序</a>] <a href="#" title='发布Phpwind论坛调用程序'>
                发布Phpwind论坛调用程序</a></li>
            <li><span id="date">[10-11]</span>[<a href="#">最新程序</a>] <a href="#" title='[更新]发布Discuz论坛调用程序'>
                [更新]发布Discuz论坛调用程序发布Discuz论坛调用程序</a></li>
            <li><span id="date">[10-06]</span>[<a href="#">程序补丁</a>] <a href="#" title='最新更新：刚刚修正几个程序的BUG'>
                最新更新：刚刚修正几个程序的BUG几个程序的BUG</a></li>
        </ul>
    </div>
</body>
</html>

-------------------------------html 2--------------

<html>
<head>
</head>
<body>
    
    <div style="width: 200px; border: 1px dashed red; overflow: hidden; text-overflow: ellipsis">
        <nobr> 就是比如有一行文字，很长，表格内一行显示不下.</nobr>
        <nobr>就a是比如有一行文字，很长，表格内一行显示不下.</nobr>
        <nobr>就1是比如有一行文字，很长，表格内一行显示不下.</nobr>
        <nobr>就F是比如有一行文字，很长，表格内一行显示不下.</nobr>
        <nobr>就是 Like You Pig Very Very Very Much.</nobr>
    </div>
    在Table中的方法：
    <table style="table-layout: fixed; border-collapse: collapse; font-size: 12px;" border="1"
        width="200" bordercolor="#666666">
        <tr>
            <td nowrap style="overflow: hidden; text-overflow: clip;">
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内

容内容
            </td>
        </tr>
    </table>
</body>
</html>