【效果實現】在照片上面顯示一段文字，最多兩行，多餘部分用省略號表示

思路：照片上面顯示文字，怎麼實現呢？
將照片作爲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;
    }