首页 > 代码库 > 文字截取,多余文字用省略号(...)代替

文字截取,多余文字用省略号(...)代替

CSS方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>用css截取标题,更利于seo</title></head><body><div style="width: 150px; font-size:12px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; white-space:nowrap;">就是比如有一行文字,很长,表格内一行显示不下</div></body></html>

JavaScript实现文本过长自动省略

一般情况下,如果要控制一段文字超出长度可以用CSS 去控制

下面我来介绍2种用js控制字符数长度显示的方法,其实这2个方法也是大同小异

方法一:

<script type="text/javascript">function check(node){ var str = node.firstChild.nodeValue;        if(str.length>10){           node.firstChild.nodeValue = str.substring(0,10) + "...";    }}window.onload=function(){    var tagK = document.getElementByIdx_x("kk2");          check(tagK); // tagK里面不能再包含别的标签}</script>

方法二:

<script type="text/javascript"> function checkWord(element){        var innerText = (typeof element.textContent == "string") ?  element.textContent : element.innerText;       //注意:因为 不同浏览器对innerText 和textContent的兼容,这里是为了匹配不同浏览的兼容性,IE,Safari,Chrome,Opera支持innerText属性,Firefox不支持innerText,但是支持作用类似的textContent属性        var wlength = innerText.length;         if(wlength>20) { var shortWord = innerText.substr(0,10); element.innerHTML = shortWord +"..."; }                   }window.onload=function() {        var tag = document.getElementByIdx_x("kk");        var tagNode = document.getElementsByTagName_r("p");        checkWord(tag);        for(var i=0; i<tagNode.length; i++) {  checkWord(tagNode[i]);}}</script>

我们以下面的HTML 代码为例进行应用:

<div id="kk1"><span class="fg">gggggggggggggkkkkkkkkkkffffff</span>如果是长的就对宽进行变形</div>

<div id="kk2">gggggggggggggkkkkkkkkkkffffff如果是长的就对宽进行变形</div>

<p>ghghgh首先判断图片是长的还是宽的。如果是长的就对宽进行变形,否则对高进行变形</p>

<p><span class="fg">gggggggggggggkkkkkkkkkkffffff</span>首先判断图片是长的还是宽的。如果是长的就对宽进行变形,否则对高进行变形</p>

<p><span class="fg">gggggggggggggkkkkkkkkkkffffff</span>首先判断图片是长的还是宽的。如果是长的就对宽进行变形,否则对高进行变形</p>

 

文字截取,多余文字用省略号(...)代替