• li内文字超出隐藏,不允许出现半汉字截断,超出后仍显示new图片,小于宽度自动跟随


    效果,li内文字超出隐藏,不允许出现半个汉字,超出后仍显示new图片,小于宽度自动跟随,


    div代码:
      <div class="contenta_news">
       <h2><a href="market?marketType=0"><img width="287" height="30" border="0" src="images/home_mlks.jpg"></a></h2>
       <ul>
       <li><a title="1.7《每日经济新闻》引用北京美联市场研究部观点" href="">·<span class="STYLE_ts2">1.7《每日经济新闻》引用北京美联市场研究部观点</span></a>< em><img src="images/new.gif"></em></li>
       <li><a title="1.4“新浪二手房”发文引用北京美联观点" href="">·<span class="STYLE_ts2">1.4“新浪二手房”发文引用北京美联</span></a><em& gt;<img src="images/new.gif"></em></li>
       <li><a title="12.30《每日经济新闻》引用北京美联市场研究部观点" href="">·<span class="STYLE_ts2">12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美</span><em& gt;<img src="images/new.gif"></em></a></li>
       <li><a title="不受“限购”房价更低北京商改住楼盘大行其道" href="">·<span class="STYLE_ts2">不受“限购”房价更低北京商改住楼盘大</span></a></li& gt;
       <li><a title="12.29《信报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.29《信报》引用北京美联观点</span></a></li>
       <li><a title="12.29《新报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.29《新报》引用北京美联观点</span></a></li>
       <li><a title="12.29《成报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.29《成报》引用北京美联观点</span></a></li>
       <li><a title="12.24《香港经济新闻》引用北京美联观点" href="">·<span class="STYLE_ts2">12.24《香港经济新闻》引用北京美</span></a></li& gt;
       <li><a title="12.22《新报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.22《新报》引用北京美联观点</span></a></li>
       <li><a title="12.22《成报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.22《成报》引用北京美联观点</span></a></li>
       </ul>
       </div>

    css定义:

    .contenta_news{288px;
    margin-top:13px;float:left;}
    .contenta_news h2{
    292px;
    height:30px;
    margin-bottom:10px;}
    .contenta_news ul{
    292px;
    height:150px;}
    .contenta_news ul li{
    22em;       /*不允许出现半汉字截断*/
    height:20px;padding-right:18px;
    line-height:20px;
    white-space:nowrap;    /*强制不换行*/
    overflow:hidden;            /*自动隐藏文字*/                                                                           
    text-overflow: ellipsis;    /*文字隐藏后添加省略号*/
    -o-text-overflow:ellipsis; /*适用于opera浏览器*/
    white-space: pre; /* CSS 2.0 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3.0 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP Printers */
    word-wrap: break-word; /* IE 5+ */
    position:relative;
    }
    .contenta_news ul li em{
    position:absolute;
    right:0px;top:0px;}
    .contenta_news a,.contenta_news a:link,.contenta_news a:visited,.contenta_news a:hover{color:#000;display:block;}

  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    年轻人如何创业?有什么好的建议?
    青年创新创业大赛北京赛区总决赛举行
    90后瘫痪女孩靠创业改变人生
    怎么利用淘宝赚钱?具体方法有哪些?
    淘宝赚钱的方法有哪些?做淘宝要注意哪些?
    现在做淘宝赚钱吗?要注意哪些?
    2019年开淘宝店赚钱吗?需要注意什么?
    淘宝赚钱软件有哪些?具体怎么赚钱?
  • 原文地址:https://www.cnblogs.com/pansly/p/2285021.html
Copyright © 2020-2023  润新知