I have this list of search results that I want to keep the current behavior when the element with class search-string has a short text, but make the text use text-overflow ellipsis when it's longer than two lines (like in the top element). I know there's a hacky way to do it with display:-webkit-box and -webkit-line-clamp, however this will have some issues if you have elements stacked below each other like I do, since apparently this -webkit-box doesn't calculate the height properly.
<body>
<div class="suggestion-list">
<div class="list-item"><div class="search-string"> food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food food</div><span class="zai">in</span><a class="category-suggestion" href="#"> Food Products (5248) </a></div>
<div class="list-item"><div class="search-string"> food food food food </div><span class="zai">in</span><a class="category-suggestion" href="#"> Food Products (5248) </a></div>
<div class="list-item"><div class="search-string"> food food food food food food food food food food food food </div><span class="zai">in</span><a class="category-suggestion" href="#"> Food Products (5248) </a></div>
</div>
</body>
body {
background-color: cyan;
display: flex;
align-items: center;
}
.suggestion-list {
margin: auto;
background-color: white;
width: 384px;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
.list-item {
.zai {
width: fit-content;
}
.category-suggestion {
width: fit-content;
white-space: nowrap;
}
.search-string {
display: inline;
overflow: hidden;
text-overflow: ellipsis;
&::first-line {
white-space: normal;
}
}
}
}
