1. 程式人生 > >Html中文字過多,單行超出和多行超出顯示省略號

Html中文字過多,單行超出和多行超出顯示省略號

本部落格主要介紹 前端開發中文字過多,以省略號顯示。

效果如圖:

              

單行:

<!--單行-->
<p class="pl">這個屬性定義溢位元素內容區的內容會如何處理。如果值為 hidden,當點選hidden時,滾動機制關閉,</p>


CSS
/*單行文字的溢位顯示省略號*/
    .pl{
        width: 200px;
        overflow:hidden;
        text-overflow:ellipsis; 
        background: goldenrod;
        white-space: nowrap;/*加寬度width屬來相容部分瀏覽*/
    }

多行:
<div id="p2">
        這個屬性定義溢位元素內容區的內容會如何處理。如果值為 hidden,當點選hidden時,滾動機制關閉,內容會被修剪,但是瀏覽器不會顯示供檢視內容的滾動條,預設值是 visible。
        這是一個段落。這是一個段落。這是一個段落。這是一個段落。
</div>


CSS
/*多行文字溢位顯示省略號*/
        #p2{
            width: 220px;
            height: 58px;
            overflow:hidden;
            text-overflow:ellipsis; 
            background: greenyellow;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            /*-webkit-line-clamp用來限制在一個塊元素顯示的文字的行數。 為了實現該效果,它需要組合其他的WebKit屬性。常見結合屬性:
            display: -webkit-box; 必須結合的屬性 ,將物件作為彈性伸縮盒子模型顯示 。
            -webkit-box-orient 必須結合的屬性 ,設定或檢索伸縮盒物件的子元素的排列方式 。*/
        }


相關推薦

Html文字過多單行超出超出顯示省略號

本部落格主要介紹 前端開發中文字過多,以省略號顯示。 效果如圖:                單行: <!--單行--> <p class="pl">這個屬性定義溢位元

單行溢位顯示省略號

對於文字內容,單行或者多行溢位,顯示省略號,一般有兩種操作方式 Javascript截斷操作 Css溢位操作 截斷操作 let str = '23048930jsldfjklsdfsdf'; s

Notepad++刪除程式碼的註釋可刪除//單行註釋/**/註釋

申請軟體著作權時需要清除程式碼中的註釋,可以通過word和Notepad++組合操作來快速的完成 1。使用word的插入檔案功能合併多個原始碼檔案,操作方法為:新開啟1個word檔案,在“插入”標籤欄下找到“物件”點選右邊的小三角下拉選單裡選擇“檔案中的文字...”,然後在

java的覆蓋重載

繼承 簡單 bsp size instance 替換 就是 基本 判斷 今天來介紹java中的三大強功能覆蓋,重載和多態。 方法覆蓋:當一個子類繼承了一個父類時,它也同時繼承了父類的屬性和方法,可以

div或者p標籤單行超出顯示省略號

單行文字溢位顯示省略號 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文字顯示省略號 display: -webkit-box; -webkit-box-orient:&nb

mysql單行函式函式(講義)

--查詢工作為SALESMAN,MANAGER並且工資大於2500的員工資訊 --and關鍵字的執行級別高於or --可以使用小括號提升條件的執行級別,使用了小括號的級別是最高的 select * from emp where (job='SALESMAN' or j

Perl單行註釋註釋

同其他大多數程式語言一樣,Perl中的單行註釋也是#開頭,例如: #print "Hello,World!"; 但多行註釋,不同的語言有不同的註釋方式,比如說: Java,C/C++:  /*

shell 單行註釋註釋

Original url: http://blog.csdn.net/lansesl2008/article/details/20558369 1. 單行註釋 眾所周知,#  比如想要註釋:echo “ni” # echo "ni" 2. 多行註釋: 法一: : &l

單行註釋註釋 文字註釋

今天學習了單行註釋和多行註釋 例如 //main 方法... 多行註釋開頭/*  結尾*/ 還說了一些java程式中常見的錯誤例如:main方法沒有引數    有的字母沒大寫    少了;號等等 還有一些識別符號的書寫格式和作用

CSS單行省略省略方法

css abs gradient text lam -c width nbsp spl 單行顯示省略css樣式:  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis; 多行省略:   方法一、 

Oracle 單行函式函式(組函式、聚合函式)

Oracle中函式主要分為單行函式和多行函式 一、特點: 單行函式可以多層巢狀,多行函式(組函式)只能巢狀兩層(多層巢狀沒有意義)。 多行函式通常用於整表或分組統計查詢中 每次處理完一條記錄返回一個結果 二、常見的單行函式(數量比較多): lower

【Shell】單行註釋註釋

單行註釋 ‘# ‘ # echo "hello" 多行註釋 方法1 : << ! 這是註釋1 這是註釋2 這是註釋3 ! 方法2 :' 這是註釋1 這是

shell的單行註釋註釋

1、單行註釋 以#號開頭的行就是註釋,注意第一行除外(比較特殊) $ cat tets.sh #!/bin/bash #echo "I am renwoxing" #<==以#號

關於shell腳本里的單行註釋註釋方法

以“#”開頭的行就是註釋,會被直譯器忽略。 sh裡沒有多行註釋,只能每一行加一個#號。只能像這樣: #-------------------------------------------- # 這是一個自動打ipa的指令碼,基於webfrogs的ipa-build書寫:

Python文字匹配匹配內容跨

    剛開始用Python,不知道如何學習,在主管鑫哥的指導下,我從昨天下午直到今天早上開始研究了下Python的正則表示式,目的是在一段文字中找出匹配內容。     文字擷取一段如下。 p18p1: flags=4163<UP,BROADCAST,RUNNING,

SQL單行註釋註釋

MySQL單行註釋1.使用"#"#單行註釋 select * from students; 2.使用 "-- " 注意,--後跟有一個空格-- MySQL單行註釋方法二 select * from students多行註釋: 使用/* *//* 此處為註釋.... */ se

html相對(relative)絕對(absolute)位置以及float的學習使用案例 (轉)

邊距 col top 20px pre 其他 fff 例如 pan 這幾天著手於CSS的研究,研究的原因主要是工作需要,最近發現如果做前端僅僅會javascript很難盡善盡美,當然懂樣式和html在一定程度上可以讓我們更近一步。 css較為簡單,由於個人擅長編寫代碼,所以

CAD如何建立單行文字文字

相信很多朋友對於CAD編輯器,這個在CAD行業中比較常見的辦公軟體不陌生吧,CAD編輯器是CAD繪圖中必不可少的一個工具,但是有的時候設計師們在編輯圖紙內容的時候,有的地方需要輸入一些文字來進行標註說明問題,在編輯器中有單行文字和多行文字都可以進行標註,那在CAD中如何建立單行文字和多行文字呢?下面我們就一起

iOS引用本地的html並且html引用到本地的jsimage的實現流程

1.將html和js,image放在一個資料夾Resource中並且通過瀏覽器可以正常訪問,顯示對應的圖片和js交換。 2.將Resource檔案引入到專案中選擇   3.將Resource改為字尾名.bundle,然後再對應的類中採用以下程式碼進行載入。 webVie

設定div文字超出時自動換css實現文字超出N之後顯示省略號

一、對於div強制換行 1.(IE瀏覽器)white-space:normal; word-break:break-all;這裡前者是遵循標準。 #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:bre