文字超出隱藏 且后面變成點

實例: <p>文字敢超出我就敢隱藏顯示點點文字敢超出我就敢隱藏顯示點點文字敢超出我就敢隱藏顯示點點</p>

css解決方法

1.常規css方法——可以實現IE，Safari，chrome，opera瀏覽器下文字溢出省略號表示  現在在火狐的高版本也支持了（火狐低版本不支持）

p{width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}

注意點 里面的屬性要配合使用 不能缺少

white-space:nowrap;  阻止文字換行

　　　　　　它的屬性值有：

　　　　　　　　　　normal 默認。空白會被瀏覽器忽略。
　　　　　　　　　　pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
　　　　　　　　　　nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
　　　　　　　　　　pre-wrap 保留空白符序列，但是正常地進行換行。
　　　　　　　　　　pre-line 合並空白符序列，但是保留換行符。
　　　　　　　　　　inherit 規定應該從父元素繼承 white-space 屬性的值。

text-overflow:ellipsis; 文字超出隱藏 且出現省略符號

　　　　　　　它的屬性值：

                      　　　　 clip ：修剪文本。（效果和overflow 一樣直接切掉）

　　　　　　　　　　　　ellipsis：顯示省略符號來代表被修剪的文本。

 

overflow:hidden;  這個屬性挺重要的

 

 

2.利用JQ解決

 

$(function(){
　　var text_length=25; //設置超過多少個文字顯示省略號...
　　if($('p').text().length>text_length)  
　　{
　　　　$('p').text($('p').text().substring(0,text_length));
　　　　$('p').text($('p').text()+'...');
　　}
})

重點：1.text()的運用     $('p').text().length --> 這個可以獲取多少個文字

　　　2.substring() 截取字符創