Greetings, I wanted to share the code snippet I am currently using:
https://jsfiddle.net/hbahar95/27/
.text.ellipsis {
position: relative;
font-size: 14px;
color: black;
font-family: sans-serif;
width: 250px; /* You can adjust this as needed */
}
.text-concat {
position: relative;
display: inline-block;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em; /* Adjust based on number of lines and line height */
line-height: 1.2em;
text-align:justify;
}
.text.ellipsis::after {
content: "...";
position: absolute;
right: -12px;
bottom: 5px;
}
I'm currently working on creating a multi-line ellipsis effect for titles with this code.
However, I am facing an issue with vertically centering a div inside another div. Despite trying various solutions, the problem persists.
You can refer to the live example here:
While the content within the blue div appears fine, the title within the white div below is not vertically centered for some reason.
I would greatly appreciate any assistance in achieving vertical alignment of the inner div within the outer div, ensuring compatibility with IE8+.
Thank you in advance