Always forget to take notes

The part of the text that exceeds the ellipsis is displayed


<style>
.p{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<body>
    <p class="p">I'm just going to have a line of text that I'm going to replace with an automatic line of text</p>
</body>

Copy the code

Text beyond two lines, beyond part ellipsis displayed


<style>
.p{
    width: 200px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* here is more than a few lines omitted */
    overflow: hidden;
}
</style>
<body>
    <p class="p">I've got two lines of text that I want to replace. I've got two lines of text that I want to replace</p>
</body>

Copy the code