I'm currently working on a component that should display three dots when the text inside the box exceeds the height of the box. I've managed to hide the excess text below the box, but I am struggling to make the three dots appear. Instead, the text is simply cut off.
Below is a snippet of my code:
<div className={styles.box} key={index}>
<img src={boxDataItem.boxPictureLink} alt='photo'></img>
<button
className={styles.boxTitleButton}
onClick={(event) => this.handleClick(boxDataItem.boxTitleLink, event)}>{boxDataItem.boxTitle}</button>
</div>
Css:
.placeholder {
display: flex;
justify-content: flex-start;
.box {
border-top: 8px solid red;
border-left: 1px solid grey;
border-bottom: 1px solid grey;
border-right: 1px solid grey;
padding: 10px;
width: 150px;
height: 115px;
display: flex;
justify-content: center;
align-items: center;
outline: none;
margin-left: 10px;
flex-direction: column;
}
.boxTitleButton {
color: gray;
background-color: white;
font-size: 18px;
font-weight: normal;
font-family: 'ApexSerif-Book';
letter-spacing: 2;
border: 0;
padding: 5px;
margin: 0;
width: 100%;
height: 125px !important;
max-height: 125px !important;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
white-space: pre-wrap;
}
.boxTitleButton:hover {
cursor: pointer;
}
If anyone has any suggestions on how to achieve the desired result, I would greatly appreciate it!