2. 程式人生 > >JS實現段落的收縮與展開

JS實現段落的收縮與展開

阿新 • • 發佈：2018-09-30
fun bar ng- mov off lips -- 顯示行數 stat

JS實現段落的收縮與展開

轉自 CSDN博客： 一只廢汪
原文地址：https://blog.csdn.net/carryworld/article/details/77258685

主要是使用-webkit-line-clamp這個屬性進行限制顯示行數,通過計算文字在標簽內的顯示高度來計算當前文字行數,再與需要限制的行數進行對比,來確定是否顯示

代碼如下:

  1  <!--Created by lmj on 2017/8/10.-->
  2 
  3 <!DOCTYPE html>
  4 <html>
  5 <head
 
>
  6     <meta charset="utf-8">
  7     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  8     <title>段落的收起與展開</title>
  9     <script src="js/jquery.js"></script>
 10     <style type="text/css">
 11         .info-shrink-text 
 
{
 12             display: -webkit-box;
 13             overflow: hidden;
 14             text-overflow: ellipsis;
 15             -webkit-box-orient: vertical;
 16         }
 17 
 18         #info-manager-content {
 19             text-indent: 2em;
 20             font-size: 12px;
 21             color
 
: #404040;
 22             font-family: 微軟雅黑;
 23         }
 24 
 25         .more-text {
 26             display: -webkit-box;
 27             width: 100%;
 28             -webkit-box-sizing: border-box;
 29             -webkit-box-pack: end;
 30             padding-right: 10px;
 31             color: #00a5e0;
 32             font-size: 14px;
 33         }
 34     </style>
 35 </head>
 36 <body>
 37 <div class="ui-tab">
 38     <P id="info-manager-content" class="info-shrink-text">
 39         測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.
 40         測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.
 41         測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.
 42         測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.
 43         測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.
 44         測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.
 45         測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.
 46         測試段落的展開與收起.測試段落</P>
 47     <div class="more-text">查看更多</div>
 48 </div>
 49 
 50 <script type="text/javascript">
 51     var isHide = true;
 52     var textContainer;
 53     function initView() {
 54         textContainer = $("#info-manager-content");
 55         var single=document.createElement("div");
 56         // 設置文字樣式
 57         single.style.cssText = "padding:0;visibility:hidden;font-familly:微軟雅黑;font-size:12px";
 58         single.innerHTML = "單";
 59         document.body.appendChild(single);
 60         //獲取該樣式下的單個文字的高度
 61         var singleHeight = single.offsetHeight;
 62         document.body.removeChild(single);
 63         //獲取整個段落的高度
 64         var paragraphHeight = textContainer.innerHeight();
 65         //設置你要限制的高度
 66         var limitHeight = 50;
 67         //當前文本行數
 68         var currentLine = (paragraphHeight/singleHeight).toFixed(0);
 69         //轉化為行數
 70         var lineCount = (limitHeight / singleHeight).toFixed(0);
 71 //        alert(singleHeight+"----"+paragraphHeight+"---"+lineCount+"---"+currentLine);
 72 //        修改段落限制行數
 73         textContainer.attr("style", "-webkit-line-clamp:" + lineCount);
 74 //        設置按鈕的顯示或隱藏
 75         if (currentLine >= lineCount) {
 76             $(".more-text").show();
 77             isHide = true;
 78         } else {
 79             $(".more-text").hide();
 80         }
 81     }
 82     initView();
 83 
 84     window.onresize = function () {
 85         initView();
 86     };
 87     //添加點擊事件
 88     $(".more-text").on("click", function () {
 89         if (isHide) {
 90             textContainer.removeClass("info-shrink-text");
 91             $(this).text("收起");
 92             isHide = false;
 93         } else {
 94             textContainer.addClass("info-shrink-text");
 95             $(this).text("查看更多");
 96             isHide = true;
 97         }
 98 
 99     });
100 </script>
101 </body>
102 </html>

原文地址：https://blog.csdn.net/carryworld/article/details/77258685

JS實現段落的收縮與展開

相關推薦

JS實現段落的收縮與展開

fun bar ng- mov off lips -- 顯示行數 stat JS實現段落的收縮與展開 轉自 CSDN博客： 一只廢汪 原文地址：https://blog.csdn.net/carryworld/article/details/77258685

原生js實現多行文字展開收縮

view borde 正在 eat overflow scrip eight viewport div <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8">

用 js 實現 div高度與瀏覽器高度相同

一、讀取瀏覽器高度        可以利用 window.innerHeight 獲得當前瀏覽器的高度 var height = window.innerHeight;   二、獲取 div 物件 var myDiv = docu

js實現計算機時間與時間格式之間的相互轉換

獲取計算機時間，轉換時間格式： var date1 = new Date(); var date_value1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.get

js實現div顯示與隱藏

1.簡單的div <div class="col-md-12 col-sm-12" id="confirm"> <div class="form-group"> <label class

JS實現全選與全不選

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>隔行換色</title><script>function  chanclo(){//獲取標籤var arr= d

用Vue.js實現全選與全不選刪除功能

這是實現全選與全不選邏輯的程式碼，大家只要給相應的控制元件再加上刪除邏輯就完成了全選與選不選、單選等刪除功能了；這段程式碼經過我很多次強暴，是可以用的。 <template>  <div id="hello">         <ol>

安卓檢視動畫+收縮與展開

最近需求 類似支付寶 餘額寶中的一個 檢視 根據動畫 動態收縮和展開    其實很簡單  廢話不多說   上程式碼 頭部紅色佈局  可以理解為三個不同的view　　 中間佈局　顯示或隱藏動畫　  mExpandAnimation = AnimationUtils.loa

js實現全選與反選

checkbox的全選與反選，有時候還是會遇到的，這裡做下分享，如有不足之處，請加以指出<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR

Html+JS實現全選與非全選操作

看書：<input type="checkbox" name="checkbox" value=1><br> 寫字：<input type="checkbox" name="checkbox"value=2><br>

JS 實現變量在字符串中的多層拼接與嵌套

code source soft 編輯 str clas strong ros eid 簡單點。。。 ‘<a onclick="editCsRole(roleId)" class="openNewTab">編輯</a>‘; 其中 role

vue.js 實現點擊展開收起動畫

tar 通過 blog ext mar document ML 收起 dea 最近公司項目加了個頁面，其中要求是這樣的，點擊對應列表，展開和收起， 其實就是顯示和隱藏內容部分；說來慚愧，我花了半天時間才搞出來（自黑一下~）， ，，接下來分享給大家，先上效果圖： .

js實現密碼框的點擊眼睛的顯示與隱藏

password var ide oct class 密碼框 fun clas ext 密碼框的點擊眼睛的顯示與隱藏，圖標引用是bootstrap中的fontawesome （復制整個 font-awesome 文件夾到您的項目中） 還需要引入 <link rel

js點選收縮展開文字

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8" />     <title>js點選收縮展開

【JS】深拷貝與淺拷貝的區別，實現深拷貝的幾種方法

如何區分深拷貝與淺拷貝，簡單點來說，就是假設B複製了A，當修改A時，看B是否會發生變化，如果B也跟著變了，說明這是淺拷貝，拿人手短，如果B沒變，那就是深拷貝，自食其力。 此篇文章中也會簡單闡述到棧堆，基本資料型別與引用資料型別，因為這些概念能更好的讓你理解深拷貝與淺拷貝。 我們來舉個淺拷貝例

資料結構與演算法JavaScript描述讀書筆記（js實現樹）

js定義二叉查詢樹 //建立建構函式建立節點 function Node(data){ this.data = data; this.left = null; this.right = null; } function tree(){ this.root = nu

資料結構與演算法JavaScript描述讀書筆記（js實現連結串列-迴圈連結串列）

迴圈連結串列 迴圈連結串列同單鏈表，只需設定head.next = head就可以實現迴圈連結串列 其它方法不變，但是遍歷方法需要改一下 function display() { var cur = this.head; var str = ''; //如果不設定

資料結構與演算法JavaScript描述讀書筆記（js實現連結串列-雙向連結串列）

雙向連結串列 雙向連結串列的 remove() 方法比單向連結串列的效率更高，因為不需要再查詢前驅節點了 //建立建構函式建立節點 function Node(element){ this.element = element; this.next = null; th

資料結構與演算法JavaScript描述讀書筆記（js實現連結串列-單鏈表）

單鏈表 //建立建構函式建立節點 function Node(element){ this.element = element; this.next = null; } //連結串列的建構函式 function LList(){ this.head = new Node

JS實現隨機顏色的3種方法與顏色格式的轉化

JS實現隨機顏色的3種方法與顏色格式的轉化   隨機顏色和顏色格式是我們在開發中經常要用到的一個小功能，網上相關的資料也很多，想著有必要總結一下自己的經驗。所以這篇文章主要介紹了JS實現隨機顏色的3種方法與顏色格式的轉化,需要的朋友可以參考借鑑，下面來一