CSS hides extra characters and causes problems

Question

For hidden short sentences and long sentences, their upper and lower widths are not the same in the end. Why? How to solve it.

Here is my section html code:

.gridViewInside {
    position: relative;
    padding: 15px;
    background-color: #1f1e1e;
    box-sizing: border-box;
}

.gridViewInfo {
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
}

.gridViewDes {
    color: #b3b3b3;
    margin: 0;
}

.textOverName {
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.textOverInfo {
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

<div class='gridViewItem'>
    <div class='gridViewInside'>
        <img src='https://lh3.googleusercontent.com/proxy/ELF6jphb9QB2Iu8qjl4WOS2XGo018PcJc5LbwpArHi3vpxV7jurtbgN4QTqGRV_qN1Yac4xSg4hdIcMHlnF99LRNeORKVNnukeqMwSZbcBYQ'>
        <div class='textOverName'>
            <p class='gridViewInfo'>title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title
                title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title</p>
        </div>
        <div class='textOverInfo'>
            <p class='gridViewDes'>album_description album_description album_description album_description</p>
        </div>
    </div>
</div>

Result:

Answer 1

On your css, you are targeting .textOverName which is the parent of the text you want to ellipse instead of targeting .gridViewInfo, also you have to add white-space: nowrap; to prevent text wrapping to another line, just edit that and add some vertical padding and it will work.

.gridViewInside {
    position: relative;
    padding: 15px;
    background-color: #1f1e1e;
    box-sizing: border-box;
}


.gridViewDes {
    color: #b3b3b3;
    margin: 0;
}

.textOverName .gridViewInfo{
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    padding: 20px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.textOverInfo {
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}

<div class='gridViewItem'>
       <div class='gridViewInside'>
         <img src='https://lh3.googleusercontent.com/proxy/ELF6jphb9QB2Iu8qjl4WOS2XGo018PcJc5LbwpArHi3vpxV7jurtbgN4QTqGRV_qN1Yac4xSg4hdIcMHlnF99LRNeORKVNnukeqMwSZbcBYQ'>
         <div class='textOverName'><p class='gridViewInfo'>title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title </p></div>
         <div class='textOverInfo'><p class='gridViewDes'>album_description album_description album_description album_description</p></div>
       </div>
      </div>