Layout css - text overflow text-overflow: ellipsis;

Single-line text overflow:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Multiple lines of text overflow:

display: -webkit-box;

overflow: hidden;

text-overflow: ellipsis;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

 

effect:

Code:

        .pBox {
            width: 200px;
            outline: 1px solid red;
            margin: 100px auto;
        }

        .pBox>p:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 20px;
        }

        .pBox>p:last-child {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }


    <div class="pBox">
        <p>
            In the distance when "you want to tears" This hypocritical wording structure experienced people will understand that pain is unspeakable. I deserve you did not deaf you really did not move when a person is secretly watching your microblogging you broadcast the song sounds so familiar with the day we sit heard singing too contrived it now sounds actually very vivid might be time to make the ears become tolerant 
        </ the p-> 
        <the p-> 
            in the distance of time, "want you to tears." this hypocritical wording structure experienced people will understand that pain is unspeakable. I deserve you did not deaf you really did not move when a person is secretly watching your microblogging broadcast your song sounds so familiar that we sit together listening to the same day it's too contrived singing even now sounds very vivid might be time to make the ears become tolerant 
        </ the p-> 
    </ div>