在用戶控件的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>
效果和上圈差不多,只是省略號的個數在不同瀏覽器中的個數也不同。

