Article From:https://segmentfault.com/q/1010000011642495
Question:

When text is moved, all characters appear and ellipsis vanishes. The ellipsis appears when the P tag is down. Do not use JS, pure C3 to achieve results.

p {

    margin: 0;
    padding: 0;
}
    div {
        margin: 10px 50px;
        width: 200px;
        height: 300px;
        float: left;
        background-image: url(cxx.jpg);
        background-size: cover;
    }
     p {
         box-sizing: border-box;
         padding: 5px;
         color: white;
        width: 200px;
        background-color:rgba(0, 0, 0, 0.5);
    }
    .one p{
        height: 100px;
        transform: translateY(200px);
    }
    .two p {
        height: 300px;
    }

The above is style…

<div class="one">![Picture description][1]< p> when text is moved, all characters appear and ellipsis vanishes. The ellipsis appears when the P tag is down. Do not use JS... < /p>< /div>< div CLass= "two" >< p> when text is moved, all characters appear and ellipsis vanishes. The ellipsis appears when the P tag is down. Do not use JS, pure C3 to achieve results. How to implement text movement when text appears, and ellipsisDisappear. The ellipsis appears when the P tag is down. Do not use JS, pure C3 to achieve results. When text is moved, all characters appear and ellipsis vanishes. The ellipsis appears when the P tag is down. Do not use JS, pure C3 to achieve results. < /p>< /div>

Translate overhidden display:none display:block has been tried.
Still use it

Answer 0:
  .one p{
    overflow: hidden;
    height: 72px;
    transform: translateY(228px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
  }
  .one p:hover{
    height: 100%;
    transform: translateY(0);
    display: block;
  }

Didn’t you all write it?

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *