分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

css文本各种属性集合

发布时间:2023-09-06 01:53责任编辑:苏小强关键词:暂无标签

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;

             }

css文本各种属性集合

原文地址:https://www.cnblogs.com/tw1015/p/9019598.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved