文字处理（文字阴影和文本溢出处理）

本文章仅列举了文本处理中的两个效果，文字阴影和文本溢出的处理，个人认为文本溢出处理用的会比较多，例如电商网站中的商品标题就可以用到。接下来是演示部分。

一、文字阴影（text-shadow）

菜鸟教程：

 

 

 

简单来说：text-shadow: 20px 20px 5px #000 ; (x轴偏移，x轴偏移，模糊程度，颜色)，只需要搞懂参数是什么意思就行，如此简单。

举个例子：

html 代码：

<h1>文本-阴影</h1>
    <div class="box">
        <span>文字阴影效果 text-shadow: 20px 20px 5px #000</span>
    </div>

css 代码：

.box{
     width: 100%;
     height: 300px;
     border-bottom: 1px solid #999;
    }
.box span{
    font-size: 30px;
    margin: 200px;
    font-weight: bold;
    text-shadow: 20px 20px 5px #808080 ;
    }

效果：

二、文本溢出处理

话不多说，直接上代码。

注：文本溢出的代码都是固定写法，缺一不可！！！

1、单行文本溢出

html代码：

<h2>单行文本溢出</h2>
<div class="box">
　　<p class="singleLine">
　　　　单行文本溢出单行文本溢出单行文本溢出单行文本溢出单行文本溢出
　　　　单行文本溢出单行文本溢出单行文本溢出单行文本溢出单行文本溢出
　　　　单行文本溢出单行文本溢出单行文本溢出单行文本溢出单行文本溢出
　　</p>
</div>

css代码：

.box .singleLine{
　　width: 200px;
　　height: 20px;
　　border: 1px solid #999;

　　/* 单行文本溢出 */
　　white-space: nowrap; /* 文本在一行显示，不换行 */
　　text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。*/
　　overflow: hidden; /* 超出部分隐藏 */
}

效果：

 

2、多行文本溢出

html代码：

<h2>多行文本溢出</h2>
      <div class="box">
           <p class="multiLine">
                多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出
                多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出
                多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出
           </p>
      </div>

css代码：

.box .multiLine{
                /* 注意不写高度 */
                width: 200px;
                border: 1px solid #999;
                
                /* 多行文本溢出 */
                text-overflow: ellipsis;   /* 显示省略符号来代表被修剪的文本。*/
                word-wrap: break-word;   /* 在长单词或 URL 地址内部进行换行。*/
                overflow: hidden;  /* 超出部分隐藏 */
                display: -webkit-box; 
                -webkit-line-clamp: 2; /*行数*/ /* 行数可以根据需要设定 */
                -webkit-box-orient: vertical;  /* 从顶部向底部垂直布置子元素 */
            }

效果：

 

以上就是两个效果的实现步骤。文章到此结束。。。