整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
很多網(wǎng)站的表單提交頁面中文本框輸入時(shí)會(huì)出現(xiàn)限制輸入的字?jǐn)?shù)，然后還會(huì)統(tǒng)計(jì)你已經(jīng)輸入多少字?jǐn)?shù)剩余多少。今天就來簡(jiǎn)單寫一個(gè)類似的例子，有興趣的小伙伴可以參考下：
效果圖：
html:
JS代碼：
首先獲取輸入的字節(jié)數(shù)然后用總限制字?jǐn)?shù)減去輸入的等于已經(jīng)輸入多少賦值給rem.最后就計(jì)算id為id2中剩余輸入的字?jǐn)?shù)。
、將富文本html內(nèi)容轉(zhuǎn)換為純文本
formatrichtext=(richtext, len=0)=> {
let content=richtext.replace(/<.+?>/g, '');
content=content.replace(/ /ig, ''); /* 去除 */
content=content.replace(/\s/ig, ''); /* 去除空格 */
return content;
}2、限制展示的文本長(zhǎng)度
時(shí)候需要控制下文字?jǐn)?shù)，不然就會(huì)溢出，頁面就會(huì)變樣不美觀。這時(shí)我們就可以用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)。可以不換行，超出部分顯示省略號(hào)，也可以可以換行，多行，超出部分顯示省略號(hào)。
1.不換行，超出部分顯示省略號(hào)
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
/*超出部分就隱藏*/
overflow:hidden;
/*不換行設(shè)定*/
white-space:nowrap;
/*超出部分的文字顯示省略號(hào)*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</div>
</body>
</html>
效果圖如下：
2.可以換行，多行，超出部分顯示省略號(hào)
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>可以換行，多行，超出部分顯示省略號(hào)</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
display: -webkit-box;
-webkit-box-orient: vertical;
/*2行*/
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">1.用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</div>
<div class="box">2.用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</div>
</body>
</html>
效果圖如下：
注：此方法適用于WebKit瀏覽器及移動(dòng)端。
除注明外的文章,均為來源:湯久生博客,轉(zhuǎn)載請(qǐng)保留本文地址！
原文地址：http://tangjiusheng.com/divcss/169.html
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
