CSS div內文字顯示兩行,超出部分省略號顯示


1. 概述

1.1 說明

在項目過程中,有時候需要控制div內文字最多顯示兩行,超出的使用省略號進行處理。使用識別碼/前綴-webkit進行處理可直接得到相應效果。

1.2 -webkit

WebKit內核的css前綴為“-webkit-”,Comodo Drangon(科摩多龍),蘋果,安卓,搜狗高速瀏覽器3,快快瀏覽器,楓樹瀏覽器,雲游瀏覽器,360極速瀏覽器,世界之窗極速版,SRWare Iron,獵豹瀏覽器,RockMelt,QQ瀏覽器都可識別。

備注:IOS版的微信、android版本的X5內核,都是采用webkit內核。

 2. 代碼

2.1 代碼示例

  • text-overflow屬性規定當文本溢出包含元素時發生的事情
    • ellipsis 顯示省略符號來代表被修剪的文本(單行溢出)
    • clip 修剪文本
    • string 使用給定的字符串來代表被修剪的文本
    • -o-ellipsis-lastline  從 Opera 10.60 開始有此值,但不在標准之內
  • -webkit-line-clamp WebKit支持,不在標准之內(ie和火狐不兼容)
.fontClass {
  color: #333;
  font-size: 28rpx;
  line-height: 40rpx;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

 

2.2 單行示例

.fontClass{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM