<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          css自動省略號...,通過css實現單行、多行文本溢出顯示省略號

          時間:?2017-11-03閱讀:?2328標簽:?css

          網頁開發過程中經常會遇到需要把多行文字溢出顯示省略號,這篇文章將總結通過多種方法實現文本末尾省略號顯示。

          一、單行文本溢出顯示省略號(…)

          省略號在ie中可以使用text-overflow:ellipsis了,但有很多的瀏覽器都需要固定寬度了,同時ff這些瀏覽器并不支持text-overflow:ellipsis設置了,下文來給各位整理一下兼容各瀏覽器顯示省略號教程。大家應該都知道用text-overflow:ellipsis屬性來實現單行文本的溢出顯示省略號(…)。當然部分瀏覽器還需要加寬度width屬性。
          .demo{
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
          }

          但是這個屬性并不支持多行文本溢出顯示省略號。


          二、多行文本溢出顯示省略號(…)

          方法一

          在WebKit瀏覽器或移動端的頁面實現比較簡單,可以直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ;注意:這是一個不規范的屬性,它沒有出現在 CSS 規范草案中。樣式說明:

          -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果,它需要組合其他的WebKit屬性。常見結合屬性:

          display: -webkit-box; 必須結合的屬性 ,將對象作為彈性伸縮盒子模型顯示 。

          -webkit-box-orient 必須結合的屬性 ,設置或檢索伸縮盒對象的子元素的排列方式 。

          -webkit-line-clamp :代表行數,比如多少行設置省略號...。 

          .demo{
              display: -webkit-box !important;  
              overflow: hidden;  
              text-overflow: ellipsis;  
              word-break: break-all;  
              -webkit-box-orient: vertical;  
              -webkit-line-clamp: 2;    
          }
          方法二
          .demo{
          	position: relative; line-height: 20px; max-height: 40px;overflow: hidden;
          }
          .demo::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
          	background: -webkit-linear-gradient(left, transparent, #fff 55%);
          	background: -o-linear-gradient(right, transparent, #fff 55%);
          	background: -moz-linear-gradient(right, transparent, #fff 55%);
          	background: linear-gradient(to right, transparent, #fff 55%);
          }

          適用范圍:該方法適用范圍廣,但文字未超出行的情況下也會出現省略號,可結合js優化該方法。

          注意事項:

          將height設置為line-height的整數倍,防止超出的文字露出。

          給p::after添加漸變背景可避免文字只顯示一半。

          由于ie6-7不顯示content內容,所以要添加標簽兼容ie6-7(如:<span>…<span/>);兼容ie8需要將::after替換成:after。

          方法三

          用js也可以根據上面的思路去模擬,實現也很簡單,推薦幾個做類似工作的成熟小工具 

          1.clamp.js

          //Single line
          $clamp(myHeader, {clamp: 1});
          
          //Multi-line
          $clamp(myHeader, {clamp: 3});
          
          //Auto-clamp based on available height
          $clamp(myParagraph, {clamp: 'auto'});
          
          //Auto-clamp based on a fixed element height
          $clamp(myParagraph, {clamp: '35px'});

          地址:https://github.com/josephschmitt/Clamp.js

          2.jQuery插件-jQuery.dotdotdot

          $(document).ready(function() {
              $("#dome").dotdotdot({
                  // configuration goes here
              });
          });

          jquery.dotdotdot一個jQuery插件用于當文本內容超出容器大小時顯示省略號 


           


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/48

          CSS中的一些細節

          當position設置為:absolute或者fixed時,元素的display會轉換為block。(設置float也會產生這樣的效應)正常情況下,div會被內容撐開,但是如果設置了1.的情況下,父元素就會產生塌陷,失去高度。

          原來 CSS 這樣寫是會讓 App 崩潰的

          之前在自己的個人公眾號中提到了一篇利用 CSS 的方式進行 XSS 攻擊,當時有朋友跟我說,讓我去獲取那個網站的 cookie,再然后進入那個網站的后臺去玩。然而,技術能力實在有限,搞不了這些東西

          如何通過CSS向JS傳參?

          CSS中有很多媒體查詢的用法,例如設備尺寸判別,是否支持鼠標行為,是否是黑暗模式,是否是省電模式等。CSS可以自動檢測,但是有時候,在JS中,我們也需要根據不同的系統主題,然后實現不同的交互邏輯,或者渲染出不一樣的內容。

          Javascript可以控制css嗎?

          JavaScript可以直接控制css。JavaScript中可以直接設置style的屬性、改變class、設置cssText、創建引入新的css樣式文件等方法來控制css樣式。

          為什么 CSS 這么難?

          我同 CSS 打交道已經有幾年了,每當需要就會用到它。最近我想明白了一個問題,那就是為什么做好 CSS 樣式如此之難。如果你一直都在 CSS 中苦苦掙扎,你要知道自己并不是一個人。本文就是要告訴你為什么 CSS 這么難

          css常用代碼

          禁止div點擊;鼠標放置顯示“小手”手勢,并顯示提示文字;超出區域的文字顯示省略號;div+css控制圖片等比例縮放;設置元素在另一個元素的最底部;設置背景顏色,不透明度

          六種組織CSS的方式

          Ben Frain曾經說過,寫css代碼很容易,但是擴展和維護卻很難。本文就介紹了一套方案來解決這個問題。OOCSS 意為面向對象的CSS。這種方法有兩種主要 觀點:結構與設計分離,容器和內容分離

          不為人知的七個CSS知識點

          如果你在日常工作中使用CSS,那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。

          Web前端-CSS必備知識點

          css基本內容,類選擇符,id選擇符,偽類,偽元素,結構,繼承,特殊性,層疊,元素分類,顏色,長度,url,文本,字體,邊框,塊級元素,浮動元素,內聯元素,定位。

          css加載會造成阻塞嗎?

          js執行會阻塞DOM樹的解析和渲染,那么css加載會阻塞DOM樹的解析和渲染嗎?所以,接下來我就來對css加載對DOM樹的解析和渲染做一個測試。為了完成本次測試,先來科普一下,如何利用chrome來設置下載速度

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网