2. 程式人生 > >利用js實現文字過多時隱藏部分文字

利用js實現文字過多時隱藏部分文字

阿新 • • 發佈：2019-02-18

    效果：當文字字數超過9個時，隱藏第九個字之後文字，使用“…顯示全部”的標籤代替。點選“…顯示全部”顯示所有文字資訊。“…顯示全部”變成“收起”。點選“收起”又變回9個字文字。
    原理：在一個名為fullText的div標籤中存放所有文字，在另一個名為subText的div標籤中存放9個字的文字，在一個a標籤中實現點選效果。頁面初識載入時，將要顯示的文字放入一個text變數中，將fullText的div的文字置為空，判斷text長度是否大於9，若大於9，在名為subText的div標籤中顯示前9個字的文字+“…顯示全部”。若不大於9，在subText顯示全部文字。
點選a標籤時，判斷a標籤的文字內容，若為“…顯示全部”，將text變數中的值賦給subText，並將a標籤改為”收起”。若a標籤中的內容為”收起”，將text變數的前9個值賦給subText並將a標籤改為“…顯示全部”。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title>隱藏功能</title>
</head>
<body>
<div id="d1"><div id="fullText">以前鏗鏘有力的靈魂之聲，不知道什麼時候，被默默沉寂在心底。渴望著黑夜裡，能有一雙巨大有力的手，將我的冰冷握緊。在這些安靜的日子裡，一個人無言無語，對著擱置了很久的書，認真的翻閱起來。裡面的一些話語，帶著禪意，讓人頓悟，豁然開明。</div
 
> <div id="subText"></div><a id="btn" onclick="change()"></a></div>
<script>
    var text;
    function show() {
        text = document.getElementById("fullText").innerHTML;
        document.getElementById("fullText").innerHTML = "";
        document.getElementById("subText"
 
).style.float = "left";
        document.getElementById("btn").style.float = "left";
        if(text.length > 9) {
            document.getElementById("subText").innerHTML = text.substring(0, 9);
            document.getElementById("btn").innerHTML = "...顯示全部";
        } else {
            document.getElementById("subText").innerHTML = text;
            document.getElementById("btn").innerHTML = "";
        }
    }
    function change() {
        var t = document.getElementById("btn");
        var tt = document.getElementById("subText");
        if(t.innerHTML == "...顯示全部") {
            tt.innerHTML = text;
            t.innerHTML = "收起"
        } else {
            tt.innerHTML = text.substring(0, 9);
            t.innerHTML = "...顯示全部"
        }
    }
    show();

</script>
</body>
</html>

相關推薦

利用js實現文字過多時隱藏部分文字

    效果：當文字字數超過9個時，隱藏第九個字之後文字，使用“…顯示全部”的標籤代替。點選“…顯示全部”顯示所有文字資訊。“…顯示全部”變成“收起”。點選“收起”又變回9個字文字。     原理：在一個名為fullText的div標籤中存放所有文字，在另一個

利用js實現多行文字框的全選

<!DOCTYPE html> <html> <head>     <title>139</title>     <meta charset="utf-8">     <script type="t

jstl標籤實現文字過長隱藏顯示問題

本文僅用於自己記憶一些比較好用的知識點使用 當文字過長引起顯示問題的時候我們可以將過長的文字隱藏起來一部分，滑鼠移動過去顯示出來 需要用到的jstl標籤有 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl

[轉] 利用js實現 禁用瀏覽器後退

cti scrip style 瀏覽器中 文本框 所有 方案 att word [From] http://blog.csdn.net/zc474235918/article/details/53138553 現在很多的內部系統，一些界面，都是用戶手動點擊退出按鈕的。但

利用js實現popup彈窗

settings element type 路由 數據庫 點擊 ack get 事件 簡單實現一個通過一個網頁，點擊生成一個彈窗，然後點擊保存之後自動關閉彈窗的功能。 首先在settings文件中寫上兩條對應的路由關系。 1 urlpatterns = [ 2

利用JS實現簡單的瀑布流效果

color position func 如何實現 利用 無限 bar 拓展 復制代碼 一.瀑布流之準備工作 　　 首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那麽我就來簡單介紹下本地

利用js實現全、反選、全不選功能(check)

box tag 實現 所有 利用 .get 乒乓球 獲取 get <!DOCTYPE html><html><head><meta charset="utf-8"/><title></ti

利用js實現全選、反選、全不選(button)

put () false 全選 charset btn tel pre fun <!DOCTYPE html><html><head><meta charset="utf-8"/><title>

利用datatable實現 列的 顯示/隱藏

前提 在做後臺系統時，大多數是一些資料的展示，而有些時候，列表資料太多，不一定是使用者想要看到的資料，就需要做一個列 顯示/隱藏的功能 功能實現 第一種方法：此方法實用於使用整套的datatable，就是說在實現顯示/隱藏功能的同時，必須利用他的外掛自動生成分頁，自動搜尋，排

利用JS實現圖片切換

事件舉例: 1.要求實現效果：當滑鼠懸停在照片上時更換為另一張照片；當滑鼠離開時，還原為本來的圖片。 說明： 1.一般來說對於一個事件問題處理起來分為三個步驟： （1）獲取事件 （2）繫結事件 （3）書寫事件驅動程式 程式碼如下 <!doctype html> <htm

利用JS實現vue中的雙向繫結

Vue 已經是主流框架了 它的好處也不用多說，都已經是大家公認的了 那我們就來理解一下Vue的單向資料繫結和雙向資料繫結 然後再使用JS來實現Vue的雙向資料繫結 單向資料繫結 指的是我們先把模板寫好，然後把模板和資料（資料可能來自後臺）整合到一起形成HTML程式碼，然後把這段HTML程式碼插入到文件流裡面

利用datatransfer實現單張圖片預覽和文字預覽

實現單張圖片預覽 首先要給個盒子識別是否拖拽圖片進入區域 <div id="result" class="result"> </div> <ul> </ul> Javascript邏輯程式碼 <

利用js實現複選框的全選和反選

<!DOCTYPE html> <html> <head>     <title>142</title>     <meta charset="utf-8">     <script type="t

js實現div顯示與隱藏

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

利用js實現頁面關閉時傳送http請求

一、背景假設有一個圖片瀏覽的網頁，每日pv量大概在80,000,000左右，uv量在3,000,000左右，現需要統計每張圖片的pv量。二、方案方案1 每瀏覽一張圖片，傳送圖片id和瀏覽數量到後臺，並記錄到資料庫（可能會涉及到快取機制，比如Memcache）方案2 在頁面中用

利用JS實現按鈕onclick提交表單時，按鈕無法響應問題

<%@page import="dao.library.com.UserDao"%> <%@page import="java.util.List"%> <%@page import="entity.library.com.User"%>

關於JS實現使用者登入驗證（部分程式碼簡寫）

    上個星期上課時，吳亮老師說，用JS實現下驗證，因回家耽誤了4天，現在把寫好的程式碼Pia上來~~~ function getFocus() //設定使用者名稱文字框獲取焦點 { document.getElementById("txtusername")

利用js實現二級聯動的簡單例項

此例項是一個簡單的二級聯動，第一個列表中的值為固定的，第二個列表中的值隨著第一個列表值的變化而變化，即第一個列表影響第二個列表。實現思路：先寫兩個<select>標籤，用name或id來區分；寫一個二維陣列來存放資訊；在一級選單中使用onchange()事件來動態

利用js實現 禁用瀏覽器後退

       現在很多的內部系統，一些介面，都是使用者手動點選退出按鈕的。但是為了避免，使用者誤操作 點選瀏覽器後退，或者用滑鼠手勢後退什麼的。容易出現誤操作。        所以在有些頁面上，適當的

利用js實現頁面跳轉並在跳轉到的頁面進行判斷操作

1、跳轉按鈕頁面 可以在a標籤上直接寫上跳轉的地址，這裡要注意的是url後面要接上我們傳到下個頁面的引數，這樣才能在下個頁面利用js解析url並進行判斷。 <a href="123.html?