css文本各種屬性集合


1.   字體屬性

          font-family:‘微軟雅黑’  指定字體Css屬性設置樣式
         font-size: 12px/em/rem
         font-weight:normal;
         font-style:設置字體傾斜,可能的屬性有normal、italic、oblique;
         line-height:設置字體的行間距;
         color:red 字體顏色
      

 2.    文本屬性

         text-align:控制文本的對齊方式
         text-indent :控制文本首行的縮進,px或%都可;

 

         white-space:文檔中的空白處
         屬性值:noraml: 默認忽略多個空格,只輸出一個空格 .
                    nowrap: 強制不換行
                    pre:空格/縮進/換行 會給保留
                    pre-line:合並空表(多個空格只會輸出一個空格)
                    pre-warp:保留空白/縮進,正常換行 ;
         letter-spacing:控制字母之間的距離;
         text-overflow:當文本溢出包含元素時發生的事情;
         屬性值: clip  修剪文本。
                     ellipsis  顯示省略符號來代表被修剪的文本。
                     string  使用給定的字符串來代表被修剪的文本。
                     word-spacing :控制單詞間空格的距離,以空格來區分單詞,中英都OK;

 

 

 3.   下划線屬性

          text-decoration :控制文本是否有下划線,可能值有
        none  沒有下划線
        overline  定義文本上的一條線。
        line-through  定義穿過文本下的一條線。
        underline  定義文本下的一條線。
 
 

 4.    轉換大小寫:

           text-transform:
          屬性值: none(默認) 無轉換;
          capitalize:每個單詞第一個字母為大寫;
          upercase :轉換成大寫;
          lowercase:轉換成小寫;

 

 

 5.    邊框屬性

           border-radius :60px 30px 40px  50px /左上 右上 右下 右左  /50%為圓
         
 

 6.     盒子陰影

           box-shadow:盒子陰影;
          //可以有五個值  (h-shadow水平陰影位置,v-shadow垂直陰影位置,blur模糊距離,spread陰影尺寸, color,                           inset/outset內外陰影 ) 
          eg:box-shadow: 10px 5px 10px red inset; 
         

  7.    文本超出換行

          Word-warp:允許長單詞轉換到下一行
          Word-break:允許在單詞內轉行(自動換行)
 

  8.    文字擺放形式

          direction: 文字擺放方向
         屬性值 ltl:從左往右
                    rtl:從右往左
   
       

   9.    文本超出換行

           Word-warp:允許長單詞轉換到下一行
          Word-break:允許在單詞內轉行(自動換行) ..
 

  10.    文字陰影:

           text-shadow:參考盒子陰影
          

  11.    文本單行超出顯示省略號

             {
               overflow:hidden;
               white-space:nowrap;
               text-overflow:ellipsis;

             }            

   12.    多行文本超出用省略號代替限制行數           

            {
               overflow:hidden;
               word-break: break-all;
               display: -webkit-box;
               -webkit-line-clamp: 3; /*限制在一個塊元素顯示的文本的行數*/
               -webkit-box-orient: vertical;
               text-overflow:ellipsis;

             }


免責聲明!

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



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