Idea: how to realize the text displayed on the photo?
Take the picture as the background of the div!

Design sketch:

html:

  <div class="outer">
    <! -- mu lt i line text overflow display -- >
    < p class = "text" > I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text.</p>
  </div>
  <! -- single line text overflow display -- >
  < p class = "online" > I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text, I'm a very long text.</p>
  <! -- input overflow display -- >
  <input type="text">

css

  <style>
    .outer {
      /*Picture as background*/
      background-image: url(./imgs/img.jpg);
      /*The height of the div must be set for the picture to display*/
      height: 600px;
      width: 600px;
      background-repeat: no-repeat;
      /*Picture fill div*/
      background-size: 100%;
      position: relative;
    }

/* Multiline text overflow hide */
    .text {
      position: absolute;
      top: 200px;
      left: 50%;
      margin-left: -100px;
      width: 200px;
      color: hotpink;
      font-size: 1.2em;


      /* Use elements as box expansion boxes */
      display: -webkit-box;
      /* Set text arrangement */
      -webkit-box-orient: vertical;
      /* Set text line limit */
      -webkit-line-clamp: 2;
      /* Overflow part hidden */
      overflow: hidden;
      /* Partial display ellipsis for text overflow */
      text-overflow: ellipsis;
    }

/* Single line text overflow hide */
    .oneline {
      width: 400px;
      /* nowrap */
      white-space: nowrap;
      /* Overflow hiding */
      overflow: hidden;
      /* Overflow text is displayed with Ellipsis */
      text-overflow: ellipsis;
    }

/* input Overflow display ellipsis for */
    input {
      /* Only this line is needed for input */
      text-overflow: ellipsis;
    }
  </style>

Single line text overflow display ellipsis

/* Single line text overflow hide */
    .oneline {
      width: 400px;
      /* nowrap */
      white-space: nowrap;
      /* Overflow hiding */
      overflow: hidden;
      /* Overflow text is displayed with Ellipsis */
      text-overflow: ellipsis;
    }

Multiline text overflow display ellipsis

/* Multiline text overflow hide */
    .text {
      width: 200px;
      /* Use elements as box expansion boxes */
      display: -webkit-box;
      /* Set text arrangement */
      -webkit-box-orient: vertical;
      /* Set text line limit */
      -webkit-line-clamp: 2;
      /* Overflow part hidden */
      overflow: hidden;
      /* Partial display ellipsis for text overflow */
      text-overflow: ellipsis;
    }

input overflow display ellipsis

/* input Overflow display ellipsis for */
    input {
      /* Only this line is needed for input, because input itself will not wrap, and it will overflow and hide. */
      text-overflow: ellipsis;
    }