【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

思路：照片上面显示文字，怎么实现呢？
将照片做为div的背景呀！

效果图：

html:

<div class="outer">
    <!-- 多行文本溢出显示 -->
    <p class="text">我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字</p>
  </div>
  <!-- 单行文本溢出显示 -->
  <p class="oneline">我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字</p>
  <!-- input溢出显示 -->
  <input type="text">

css

<style>
    .outer {
      /*将图片做为背景*/
      background-image: url(./imgs/img.jpg);
      /*必须设置div的高度,图片才能显示*/
      height: 600px;
      width: 600px;
      background-repeat: no-repeat;
      /*图片填满div*/
      background-size: 100%;
      position: relative;
    }

/* 多行文本溢出隐藏 */
    .text {
      position: absolute;
      top: 200px;
      left: 50%;
      margin-left: -100px;
      width: 200px;
      color: hotpink;
      font-size: 1.2em;


      /* 将元素做为box伸缩盒子 */
      display: -webkit-box;
      /* 设置文本排列方式 */
      -webkit-box-orient: vertical;
      /* 设置文本行数限制 */
      -webkit-line-clamp: 2;
      /* 溢出部分隐藏 */
      overflow: hidden;
      /* 文本溢出的部分显示省略号 */
      text-overflow: ellipsis;
    }

/* 单行文本溢出隐藏 */
    .oneline {
      width: 400px;
      /* 不换行 */
      white-space: nowrap;
      /* 溢出隐藏 */
      overflow: hidden;
      /* 溢出的文本用省略号显示 */
      text-overflow: ellipsis;
    }

/* input的溢出显示省略号 */
    input {
      /* 对于input只须要这一行 */
      text-overflow: ellipsis;
    }
  </style>

单行文本溢出显示省略号

/* 单行文本溢出隐藏 */
    .oneline {
      width: 400px;
      /* 不换行 */
      white-space: nowrap;
      /* 溢出隐藏 */
      overflow: hidden;
      /* 溢出的文本用省略号显示 */
      text-overflow: ellipsis;
    }

多行文本溢出显示省略号

/* 多行文本溢出隐藏 */
    .text {
      width: 200px;
      /* 将元素做为box伸缩盒子 */
      display: -webkit-box;
      /* 设置文本排列方式 */
      -webkit-box-orient: vertical;
      /* 设置文本行数限制 */
      -webkit-line-clamp: 2;
      /* 溢出部分隐藏 */
      overflow: hidden;
      /* 文本溢出的部分显示省略号 */
      text-overflow: ellipsis;
    }

input 溢出显示省略号

/* input的溢出显示省略号 */
    input {
      /* 对于input只须要这一行,由于input自己就不会换行,自己就会溢出隐藏 */
      text-overflow: ellipsis;
    }