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>
The only problem I see is that The web kit box-orient is unstable and should be replaced by flexboxes wich are an improed verion of box-orient, because box-orient is quite unstable and has non standard behavior across browsers and is not supported anymore, for more info read this.
Here is the fix to your css:
.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: flex; /* here is the fix*/
justify-content: flex-start;
-webkit-line-clamp: 1;
}
.textOverInfo {
border: 1px solid red;
width: 100%;
overflow: hidden;
display: flex; /* here is the fix*/
justify-content: flex-start;
-webkit-line-clamp: 2;
}
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:
Your box orient webkit is unstable so it is suggeted you replace it with flexboxes
