• 不顯示超出內容,顯示... (編程方法和CSS方法)

  • image

    在用戶控件的repeter控件中放了一個<li>:

    <li class="goodsname">
            <a id="A2" target="_blank" title='<%# Eval("ProductName") %>' href='<%# Eval("ProductID","~/ViewProduct.aspx?ID={0}") %>' runat="server">
                <%# Eval("ProductName") %></a>
    </li>

    希望商品名超鏈接文字只顯示行,超出2行范圍的用…顯示。

    有2個辦法可以實現,第一:

    把 <%# Eval("ProductName") %> 改寫為 <%# GetString( Eval("ProductName" )) %>

    然后在用戶控件.cs文件中添加下面這個方法:

     

    protected string GetString(object obj)
    {
        string str = Convert.ToString(obj);
        string strReturn = "**";     
        if (!string.IsNullOrEmpty(str))
        {
         //如果商品名在首頁最新商品列表中超過2行,將超出的文字省略為...
            if (str.Length > 34)
            {
                strReturn = str.Substring(0, 34) + "...";
            }
            else
            {
                strReturn = str;
            }
        }
        return strReturn;
    }

     

    第二種方法只能讓超出一行范圍的文字顯示為…, 多行無法使用這個方法:

    div+css設置列表li超出部分顯示省略號

    在網頁設計中,會遇到文本超過固定長度導致整體的網頁變形的情況。程序員往往需要截取固定的長度來實現某些固定長度的控制。介紹一種直接采用CSS 的代碼控制來實現文本截取的方法。與程序員的直接字符截取的方式有點區別,其優勢是可以自動控制文本顯示的長度;缺點是不同瀏覽器的兼容性並不完美。使用到 overflow,text-overflow,white-space 這三個主要的屬性,其他的代碼屬於修飾作用。

        CSS代碼:
        <style>
        .texthidden{
         width:200px;
         overflow:hidden;
         text-overflow:ellipsis;
         white-space:nowrap;
         border:1px solid #ddd;}
        </style>

        HTML代碼:
        <div class="texthidden">
        CSS讓容器的溢出部分內容隱藏起來
        </div>

    代碼分析:
    1. width:200px; //指定寬度:
    2. overflow:hidden; //將超出內容隱藏
    3. text-overflow:ellipsis; //IE專用屬性,文本溢出時顯示省略標記();其他瀏覽器不支持。
    4. white-space:nowrap; //強制內容不換行。強制在同一行內顯示所有文本,直到文本結束或者遭遇 br 元素

        目前使用這種方法比較成功的示例是Gmail的內容顯示,在IE下達到最好的效果。如果是FF那就比較糟糕,總是會出現截取半個中文的效果。其中涉及到最主要的原因是 text-overflow 這個屬性只在IE下有效,目前很多CSS屬性也存在這個問題,特別重要的是Margin和Padding這兩個屬性,往往導致頁面出現各種不同的效果;在頁面設計的時候,需要注意這些屬性在不同瀏覽器的顯示效果。

    ===========配圖=============

    _______________________________方法二。_____________________________________________________

    <style>

    .ellipsis a{display: block;width: 300px;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}  
    /* firefox only */ 
    .ellipsis:not(p) {clear: both;}  
    .ellipsis:not(p) a {max-width: 300px;float: left;}  
    .ellipsis:not(p):after {content: "..";float: left;width: 25px;padding-left: 1px;}
    </style>

    <div class="ellipsis"><a href="">在被征服后的歲月里,蒂卡爾自己也走上侵略道路,在瑪雅全境擴張它的勢力范圍。</a></div> 

    效果和上圈差不多,只是省略號的個數在不同瀏覽器中的個數也不同。


    免責聲明!

    本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



     
    粵ICP備18138465號   © 2018-2025 CODEPRJ.COM