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

思路：照片上面显示文字，怎么实现呢？
将照片作为 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;
    }