css 超出文本 overflow 变成点点点....

标签：超出   normal   space   超过   解决   保留   string   opera   继承   

实例: <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() 截取字符创

css 超出文本 overflow 变成点点点....

标签：超出   normal   space   超过   解决   保留   string   opera   继承   

原文地址：https://www.cnblogs.com/pineconeguo/p/10281444.html