【css】文本效果

一、字体属性

在css字体样式中常见的字体属性有以下几种

p{
    font-size: 50px;         /*字体大小*/
    line-height: 30px;      /*行高*/
    font-family: 幼圆,黑体;     /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
    font-style: italic ;        /*italic表示斜体，normal表示不倾斜*/
    font-weight: bold;    /*粗体*/
    font-variant: small-caps;  /*小写变大写*/
}

 

二、text-shadow（文字阴影）

　　1、基础用法：text-shadow: 1px 1px 5px rgb(106, 103, 103);

　　2、基础参数：

• h-shadow：必需。水平阴影的位置。允许负值。
• v-shadow：必需。垂直阴影的位置。允许负值。
• blur：可选。模糊的距离。
• color：可选。阴影的颜色。

　　3、常见文本效果

• 　　基础样式

.c{
    text-shadow: 1px 1px 5px rgb(106, 103, 103);
}

 

•  文字描边

　　有4个阴影时, 可以给文字画一个轮廓:

.b {

    color: #BBE;
        text-shadow: -1px 0 black, 
                     0 1px black, 
                     1px 0 black, 
                    0 -1px black;
}

 

•  霓虹灯效果

　　水平值和垂直值为0，适当的添加模糊距离，可以实现霓虹灯效果。

.d {text-shadow: 0 0 0.2em #8F7}
.e {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
.f {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
    0 0 0.2em #87F}

 三、文本溢出省略截断

　　1、核心css

• overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）
• white-space: nowrap；（设置文字在一行显示，不能换行）
• text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）

　　2、单行文本截断

.text-box {
            width: 500px;
            white-space: nowrap;  /*设置文字在一行显示，不换行。（会直接忽略div宽度限制在一行显示）*/
            overflow: hidden;     /*超出部分隐藏*/
            text-overflow: ellipsis;  /*规定当文本溢出是的，用 省略号来代替被省略的文本。*/
            /* text-overflow: 123;  规定当文本溢出是的，用 自定义字符 来代替被省略的文本。*/
        }

　　2、多行文本截断

　这种方法优点众多，但是兼容性一般：-webkit-line-clamp 属性只有 WebKit 内核的浏览器才支持。

.text-box2 {
            width: 500px;
             display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

　　3、多行文本截断进阶（无兼容问题）

.demo {
      
            max-height: 40px;
            line-height: 20px;
            overflow: hidden;
        }
        .demo::before{
            float: left;
            content:'';
            width: 20px;
            height: 40px;
        }

        .demo .text {
            float: right;
            width: 100%;
            margin-left: -20px;
            word-break: break-all;
        }
        .demo::after{
            float:right;
            content:'...';
            width: 20px;
            height: 20px;
            position: relative;
            left:100%;
            transform: translate(-100%,-100%);
            background-color: #fff;
        }

<div class="demo">
    <div class="text">
        文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略文本溢出截断省略
    </div>
</div>