文字溢出处理及背景图片处理

文字溢出容器打点展示

单行文本

 <p>　比赛开始前关于詹姆斯首轮抢七的几个数据：詹姆斯季后赛首轮的战绩是12-0，从未倒在第一轮。整个职业生涯詹姆斯一共打过六次抢七，前两次都输了，后面四次都赢了包括两次总决赛。在抢七里詹姆斯场均接近上场45.8分钟，砍下33.2分9.3篮板4.8助攻2抢断1盖帽。</p>
p{
     300px;
    height: 20px;
    line-height: 20px;
    border: 1px solid black;
    white-space: nowrap;        // 三件套
    overflow: hidden;           // 三件套
    text-overflow: ellipsis;    // 三件套
}

• white-space: nowrap; 文字超出不换行 
• text-overflow: ellipsis; 超出部分打点展示

---

多行文本

pc端不用这个技术，会有兼容问题；所以前端不做打点只做截断；

---

文字底对齐

• 文字会与行级块元素顶对齐；但是如果行级元素里面有文字时，就会与元素内的文字底对齐

调节文字对齐线

• vertial-align

  值：bottom 、 middle 、 top 、 text-top

---

利用white-space让文字不换行实现效果

    <a href="https://www.taobao.com" target="blank">淘宝网</a>
a{
    display: inline-block;
    text-decoration: none;
    color: #424242;
     190px;
    height: 90px;
    border: 1px solid black;
    background-image: url(demo.png);
    background-size: 190px 90px;
    text-indent: 200px;  /** 首行缩进**/
    white-space: nowrap; /**强制不换行**/
    overflow: hidden;    /**溢出部分隐藏**/
}

---

利用padding里面不能有内容，但是可以有背景图的方法实现

    <a href="https://www.taobao.com" target="blank">淘宝网</a>
a{
    display: inline-block;
    text-decoration: none;
    color: #424242;
     190px;
    border: 1px solid black;
    background-image: url(demo.png);
    background-size: 190px 90px;
    height: 0;              /**给内容区域设置高度是0**/
    padding-top: 90px;      /**让padding把内容区域撑开**/
    overflow: hidden;       /**设置溢出隐藏**/
}