前言：哈哈哈哈哈哈   每天都在搬砖，愿每天都能进步一点点！！！

1.修改input框中的placeholder的颜色 ------> 可用css3的伪类：：实现

      .card li input::placeholder{color: red;}

    <ul class="card">

              <li>

                    <span>持卡人</span>

                   <input type="text" id="name" placeholder="请输入名字">

            </li>

   </ul>

---

2.给文字左右两边加“——”   ：：：可用css3的background:linear-gradient() 实现

  css部分：

.middleTitle{

    text-align:center;

    margin-bottom:15px;

    display:flex;/*解决要是加上透明度会影响美观的bug*/

}

.middleName{

    font-size:16px;

    color:#1bbc9b;

    padding:0px 5px;

}

.middleLine{

    background:linear-gradient(transparent 49%,#ccc 49%,#ccc 53%,transparent 53%);

    flex:1;/*解决要是加上透明度会影响美观的bug*/

}

html部分：

<p class="middleTitle">

    <span class="middleLine"></span>

    <span class="middleName">我是分割线中间的文字呀呀呀</span>

    <span class="middleLine"></span>

</p>

效果如图：

3.css实现文字两端对齐

    width: 22%;

    display: inline-block;

    text-align: justify;

    text-align-last: justify;

效果图 页面布局+css

4.css实现文字超出隐藏并以……代替

    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

效果图+样式

5.当需要文字不超过3行，并以……代替时 可用 -webkit-line-clamp等属性

   text-overflow: ellipsis;

    overflow: hidden;

    -webkit-line-clamp: 3; //文字显示3行

    display: -webkit-box;

    -webkit-box-orient: block-axis;

以上属性 缺一不可 ~~~

效果图

6.给标签添加 contenteditable="true" 后标签会变成编辑框

效果图 样式

想要取消可输入标签聚焦时contenteditable的边框，可加样式：outline:none;